希望达到效果是页面第一次载入以后,如果在次刷新页或者进入下一个页面,则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 插件的核心功能是利用 JavaScript 对图片进行预加载,它的工作原理如下: 1. **创建 Image 对象**:JavaScript 的 Image 对象可以用来在后台加载图片,不阻塞页面的其他操作。PreLoad 插件会为每个需要预...
`images`文件夹自然存放了需要预加载的图片,而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片,可以采用分批加载、懒...
本文将深入探讨“图片预加载js”这一主题,包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前,提前将图片数据加载到浏览器的缓存中...
首先,我们需要创建一个JavaScript函数来处理预加载任务。这个函数会遍历图片列表,为每张图片创建一个新的`Image`对象,然后将图片的URL设置为`src`属性。这样,浏览器就会在后台开始下载这些图片,而不会阻塞其他...
预加载技术是预先加载部分关键资源,如JavaScript、CSS、图片等,使得这些资源在用户实际需要时能够更快地被浏览器解析和使用,从而减少页面首次加载时的空白等待时间。 首先,我们要理解预加载(Preloading)与...
在这个实例中,我们将探讨如何实现瀑布流效果,并结合图片预加载技术来提升用户体验。 首先,`style.css`文件通常包含了实现瀑布流布局所需的CSS样式。瀑布流布局的关键在于利用CSS的`float`属性或`display: inline...
1. **获取图片列表**:首先,你需要确定需要预加载的图片列表,这可以通过HTML元素、CSS选择器或者动态生成的数组来实现。 2. **创建`<img>`标签**:为每个图片创建`<img>`标签,并设置`src`属性为空或者占位符图片...
在IT行业中,预加载(Preloading)是一种优化网页性能的技术,它允许开发者预先加载用户可能需要的资源,如JavaScript文件、CSS样式表、图片或字体等,以减少页面加载时间,提升用户体验。在这个主题中,"两套预加载...
4. **使用link标签预加载**:HTML5的`<link rel="preload">`可以用来预加载CSS、字体和其他静态资源,原生无依赖预加载插件可能会利用这个特性。 5. **使用Script标签异步加载**:对于JavaScript文件,预加载插件...
jQuery是一款广泛使用的JavaScript库,它提供了丰富的API和插件,使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤: 1. 引入jQuery库:在HTML文件中,你需要首先引入jQuery库,可以通过CDN链接...
虽然用于图片预加载的场景比较特殊,但原理上与JavaScript预加载相似。 结合Ajax预加载图片,可以利用XMLHttpRequest对象来请求图片文件,并获取其内容。但这种方法不太常见,因为图片加载对用户是可见的,而Ajax...
另一种JavaScript预加载方法是创建一个新的`Image`对象,并为其`src`属性赋值为要预加载的图片URL。这可以通过循环遍历一个包含多个图片URL的数组来实现。这种方法更加灵活,可以预加载任意数量的图片,而不需要预先...
JavaScript在实现懒加载和预加载中扮演关键角色。我们可以使用Intersection Observer API来监听元素是否进入视口,一旦进入,就启动加载。这个API是现代浏览器支持的一个特性,可以避免频繁的滚动事件监听,提高性能...
另一种纯JavaScript预加载的方法是创建`Image`对象并设置其`src`属性。这可以在页面加载前或加载后执行,以确保图片在需要时已经准备好。例如: ```javascript function preload() { for (i = 0; i < preload....
- 编写前端JavaScript代码,使用Ajax调用预加载数据的Action方法。 - 处理Ajax响应,在前端动态更新页面内容。 9. **优化点**: - 数据缓存:预加载的数据可以考虑存储在客户端的本地存储中,避免重复请求。 - ...
为了提高页面加载效率和用户浏览的流畅性,我们可以采用图片预加载技术。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,可以帮助我们实现这一目标。本篇文章将深入探讨如何使用jQuery实现图片预加载,...
声明应该预加载或预取的内容很简单,只需确保preload或prefetch是块名称的一部分即可。 如果这是您的混合清单: { " /js/app.js " : " /js/app.js " , " /css/app.css " : " /css/app.css " , " /css/prefetch...
gulp-preload-image 是一个 Gulp 扩展,通过 CSS3(以及即将到来的 HTML 和 Javascript)作为管道的一部分将图像预加载添加到项目中。 使用。 var preload = require ( 'gulp-preload-image' ) ; 应用程序接口 预...