`
deng131
  • 浏览: 672788 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Preload CSS/JavaScript预加载

阅读更多
希望达到效果是页面第一次载入以后,如果在次刷新页或者进入下一个页面,则css,js和图片都不会再次加载。

网上代码:
window.onload = function () {
    var i = 0, max = 0,  o = null,
        // list of stuff to preload
        preload = [
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
        ],
        isIE = navigator.appName.indexOf('Microsoft') === 0;

    for (i = 0, max = preload.length; i < max; i += 1) {
        if (isIE) {
            new Image().src = preload[i];
            continue;
        }
        // new Image().src 不能在Firefox中使用,是因为Firefox会对图片执行单独的缓存。
       // 动态插入的 object 标签需要插入到非 head部分,才触发加载。
       //IE7/8也可以通过一些代码使用动态object加载文件。但是object通常降低效率。
        o = document.createElement('object');
        o.data = preload[i];

        // IE stuff, otherwise 0x0 is OK
        //o.width = 1;
        //o.height = 1;
        //o.style.visibility = "hidden";
        //o.type = "text/plain"; // IE 

        o.width  = 0;
        o.height = 0;

        // only FF appends to the head
        // all others require body
        document.body.appendChild(o);
    }
};

参考:
http://www.memonic.com/user/pneff/set/javascript/id/1pCru
http://www.joy-studio.com/frontend-develop/javascript-preload-css-js-image.html
http://www.javascriptbank.com/javascript/article/how-to/best-ways-preload-image-javascript-css-ajax/preview/en/
http://www.qianduan.net/pure-css-image-preloader.html
分享到:
评论

相关推荐

    PreLoad一个图像预加载插件以实现有序加载和无序加载

    PreLoad 插件的核心功能是利用 JavaScript 对图片进行预加载,它的工作原理如下: 1. **创建 Image 对象**:JavaScript 的 Image 对象可以用来在后台加载图片,不阻塞页面的其他操作。PreLoad 插件会为每个需要预...

    jquery图片预加载

    `images`文件夹自然存放了需要预加载的图片,而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片,可以采用分批加载、懒...

    图片预加载js

    本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前,提前将图片数据加载到浏览器的缓存中...

    图片预加载loading

    首先,我们需要创建一个JavaScript函数来处理预加载任务。这个函数会遍历图片列表,为每张图片创建一个新的`Image`对象,然后将图片的URL设置为`src`属性。这样,浏览器就会在后台开始下载这些图片,而不会阻塞其他...

    网站顶部显示预加载进度条插件preload.js

    预加载技术是预先加载部分关键资源,如JavaScript、CSS、图片等,使得这些资源在用户实际需要时能够更快地被浏览器解析和使用,从而减少页面首次加载时的空白等待时间。 首先,我们要理解预加载(Preloading)与...

    瀑布流+图片预加载实例

    在这个实例中,我们将探讨如何实现瀑布流效果,并结合图片预加载技术来提升用户体验。 首先,`style.css`文件通常包含了实现瀑布流布局所需的CSS样式。瀑布流布局的关键在于利用CSS的`float`属性或`display: inline...

    jQuery实现图片预加载

    1. **获取图片列表**:首先,你需要确定需要预加载的图片列表,这可以通过HTML元素、CSS选择器或者动态生成的数组来实现。 2. **创建`&lt;img&gt;`标签**:为每个图片创建`&lt;img&gt;`标签,并设置`src`属性为空或者占位符图片...

    两套预加载表针代码

    在IT行业中,预加载(Preloading)是一种优化网页性能的技术,它允许开发者预先加载用户可能需要的资源,如JavaScript文件、CSS样式表、图片或字体等,以减少页面加载时间,提升用户体验。在这个主题中,"两套预加载...

    原生无依赖预加载插件

    4. **使用link标签预加载**:HTML5的`&lt;link rel="preload"&gt;`可以用来预加载CSS、字体和其他静态资源,原生无依赖预加载插件可能会利用这个特性。 5. **使用Script标签异步加载**:对于JavaScript文件,预加载插件...

    图片预加载

    jQuery是一款广泛使用的JavaScript库,它提供了丰富的API和插件,使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤: 1. 引入jQuery库:在HTML文件中,你需要首先引入jQuery库,可以通过CDN链接...

    利用CSS、JavaScript及Ajax实现高效的图片预加载

    虽然用于图片预加载的场景比较特殊,但原理上与JavaScript预加载相似。 结合Ajax预加载图片,可以利用XMLHttpRequest对象来请求图片文件,并获取其内容。但这种方法不太常见,因为图片加载对用户是可见的,而Ajax...

    利用CSS、JavaScript及Ajax实现图片预加载的方法

    另一种JavaScript预加载方法是创建一个新的`Image`对象,并为其`src`属性赋值为要预加载的图片URL。这可以通过循环遍历一个包含多个图片URL的数组来实现。这种方法更加灵活,可以预加载任意数量的图片,而不需要预先...

    懒加载预加载实现源码及笔记整理

    JavaScript在实现懒加载和预加载中扮演关键角色。我们可以使用Intersection Observer API来监听元素是否进入视口,一旦进入,就启动加载。这个API是现代浏览器支持的一个特性,可以避免频繁的滚动事件监听,提高性能...

    利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    另一种纯JavaScript预加载的方法是创建`Image`对象并设置其`src`属性。这可以在页面加载前或加载后执行,以确保图片在需要时已经准备好。例如: ```javascript function preload() { for (i = 0; i &lt; preload....

    struts 预加载数据demo

    - 编写前端JavaScript代码,使用Ajax调用预加载数据的Action方法。 - 处理Ajax响应,在前端动态更新页面内容。 9. **优化点**: - 数据缓存:预加载的数据可以考虑存储在客户端的本地存储中,避免重复请求。 - ...

    jquery实现图片预加载技术,使得图片加载更为流畅,和谐。

    为了提高页面加载效率和用户浏览的流畅性,我们可以采用图片预加载技术。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,可以帮助我们实现这一目标。本篇文章将深入探讨如何使用jQuery实现图片预加载,...

    laravel-mix-preload:根据您的Mix清单添加预加载和预取链接

    声明应该预加载或预取的内容很简单,只需确保preload或prefetch是块名称的一部分即可。 如果这是您的混合清单: { " /js/app.js " : " /js/app.js " , " /css/app.css " : " /css/app.css " , " /css/prefetch...

    gulp-preload-image:通过 CSS、Javascript 或 HTML 操作预加载图像的 gulp 扩展

    gulp-preload-image 是一个 Gulp 扩展,通过 CSS3(以及即将到来的 HTML 和 Javascript)作为管道的一部分将图像预加载添加到项目中。 使用。 var preload = require ( 'gulp-preload-image' ) ; 应用程序接口 预...

Global site tag (gtag.js) - Google Analytics