希望达到效果是页面第一次载入以后,如果在次刷新页或者进入下一个页面,则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
分享到:
相关推荐
方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 单纯使用CSS,可容易、高效地预加载图片...
方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 单纯使用CSS,可容易、高效地预加载图片...
声明应该预加载或预取的内容很简单,只需确保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' ) ; 应用程序接口 预...
方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 单纯使用CSS,可容易、高效地预加载图片...
图片预加载有大体有几...空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=0 var postaction=function(){} //此处增加了一个pos
方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 单纯使用CSS,可容易、高效地预加载...
jQuery-Preload-CSS-Images 一种解决方案,可自动执行在 Web 应用程序中预加载图像的古老任务。
预加载Polyfill 它就可以了...什么为什么preload似乎是当今最好的异步加载机制... 一些不错的读物: 用npm安装npm install @digitalkaoz/preload-polyfill用法该Polyfill支持以下类型: js CSS 字形 图像 音频(未经...
预加载,百分比进度条。 使用说明: 1.使用 git clone 2.里面的css 和 html 可以由自己定 3.这个js包基于jquery制作的,你可以用我包中的jquery也可以使用你自己的。 4.引入js文件,使用$.progress(preloadImg)调用...
master包含基准实施inline-css添加内联CSS并异步加载其余CSS preload添加Web字体预加载codesplitting使用CommonsChunkPlugin和WebPackBundleAnalyzer添加代码拆分技术使用JavaScript(ES2015)构建,在服务器端的...
Phaser平铺的地图Spritesheet示例免责声明有关许可证条款和条件,请参阅 。 该示例用于说明在平铺引擎中使用...设置游戏配置并移交给“预加载” :为游戏加载资源并移交给游戏:主要游戏逻辑:用于控制游戏的辅助功能
img.preload.js - jquery 预加载图像的扩展 jquery.zigfy.js - 实际的 Javascript 库扩展 zigfy.css -基本样式zigfy 就是这样! 如何使用它 zigfy有两种不同的使用zigfy : Javascript 方式 ====================...
使用Angular Ui Router(v1.0.16)和Webpack进行延迟加载和预加载的组件 有状态的父组件和无状态的子组件 支持SASS 生产 通过文件哈希进行长期缓存 最小化和压缩CSS和javascript 安装 1.克隆此项目或下载ZIP文件 $ ...
5 预加载图片 $ document ready function { jQuery preloadImages function { for var i 0; i<arguments length; i++ "" { "" jquery " ""><img>" attr &...
个人投资组合版本1.0.3 网站链接: : index.html是要编译的主文件style.css和app.js附加到主index.html上,以提供精美的特殊设计scroll.... 它已用于添加预加载屏幕。 制作者:HARASHNABIN ROY 项目于2021年2月25日开始