这篇文章主要介绍了js预加载图片方法,实例汇总了javascript实现预加载图片的常用技巧,需要的朋友可以参考下
本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下：
1. 纯CSS：
#preload-01 { background: url(http://domain.tld/image-01.png-600) no-repeat -9999px -9999px; } #preload-02 { background: url(http://domain.tld/image-02.png-600) no-repeat -9999px -9999px; } #preload-03 { background: url(http://domain.tld/image-03.png-600) 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-600) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png-600) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png-600) 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：
4. JS代码2：
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-600"; }, 1000); }; 7. Ajax代码2：
window.onload = function() { setTimeout(function() { // reference to 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-600"; }, 1000); };希望本文所述对大家的javascript程序设计有所帮助。
以上就是js预加载图片方法汇总的详细内容，更多请关注0133技术站其它相关文章！
