js预加载图片方法汇总
2015-06-15 00:00
926 查看
本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下:
1. 纯CSS:
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; } #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
2. JS+CSS优化:
// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/ function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);
3. JS代码1:
<div class="hidden"> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var images = new Array() function preload() { for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image() images[i].src = preload.arguments[i] } } preload( "http://domain.tld/gallery/image-001.jpg", "http://domain.tld/gallery/image-002.jpg", "http://domain.tld/gallery/image-003.jpg" ) //--><!]]> </script> </div>
4. JS代码2:
<div class="hidden"> <script type="text/javascript"> <!--//--><![CDATA[//><!-- if (document.images) { img1 = new Image(); img2 = new Image(); img3 = new Image(); img1.src = "http://domain.tld/path/to/image-001.gif"; img2.src = "http://domain.tld/path/to/image-002.gif"; img3.src = "http://domain.tld/path/to/image-003.gif"; } //--><!]]> </script> </div>
5. JS代码优化2:
function preloader() { if (document.images) { var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); img1.src = "http://domain.tld/path/to/image-001.gif"; img2.src = "http://domain.tld/path/to/image-002.gif"; img3.src = "http://domain.tld/path/to/image-003.gif"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);
6. Ajax代码1:
window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.js'); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.css'); xhr.send(''); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };
7. Ajax代码2:
window.onload = function() { setTimeout(function() { // reference to <head> var head = document.getElementsByTagName('head')[0]; // a new CSS var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href = "http://domain.tld/preload.css"; // a new JS var js = document.createElement("script"); js.type = "text/javascript"; js.src = "http://domain.tld/preload.js"; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };
希望本文所述对大家的javascript程序设计有所帮助。
相关文章推荐
- 原生js实现模拟滚动条
- 在JavaScript中使用对数Math.log()方法的教程
- JavaScript中的pow()方法使用详解
- JavaScript中用于生成随机数的Math.random()方法
- JavaScript中用于四舍五入的Math.round()方法讲解
- JavaScript中的Math.sin()方法使用详解
- 在JavaScript中使用开平方根的sqrt()方法
- 简介JavaScript中用于处理正切的Math.tan()方法
- 简述JavaScript中正则表达式的使用方法
- Javascript 高阶函数使用介绍
- Javascript 是你的高阶函数(高级应用)
- JavaScript的执行环境和作用域
- javascript 易漏点
- 被Unable to compile class for jsp搞疯了
- ExtJS ComboBox 下拉列表详细用法
- JavaScript词法结构
- 运算符2—JS学习笔记2015-6-14(第57天)
- 对Extjs中store的多种操作
- 《Javascript高级程序设计》--读书笔记(二)
- JavaScript面向对象编程——非构造函数的继承