圖片預加載即提前加載圖片，可保證圖片快速、無縫地發布，用戶需要查看時可直接從本地緩存中渲染，適用於圖片占據很大比例的網站。
方法1,在CSS background中加載：會增加頁面的整體加載時間
#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }
方法2，JS new image對象，設置src加載：
function preloader() { if (document.images) { var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); img1.src = ";; img2.src = ";; img3.src = ";; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else {//onload中未掛載函數才執行該JS window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);
div.appendChild(img1);//插入到DOM
方法3，Ajax預加載,new Image()對象設置src
window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', url;); xhr.send(); xhr = new XMLHttpRequest(); xhr.open('GET', url;); xhr.send(); // preload image new Image().src = ";; }, 1000); };
懶加載：將圖片src賦值為一張默認圖片，當用戶滾動滾動條到可視區域圖片時候，再去加載真正的圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload 2</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/loading.gif" data-src="images/1.png">
<img src="images/loading.gif" data-src="images/2.png">
<img src="images/loading.gif" data-src="images/3.png">
<img src="images/loading.gif" data-src="images/4.png">
<img src="images/loading.gif" data-src="images/5.png">
<img src="images/loading.gif" data-src="images/6.png">
<img src="images/loading.gif" data-src="images/7.png">
<img src="images/loading.gif" data-src="images/8.png">
<img src="images/loading.gif" data-src="images/9.png">
<img src="images/loading.gif" data-src="images/10.png">
<img src="images/loading.gif" data-src="images/11.png">
<img src="images/loading.gif" data-src="images/12.png">
<script>
function throttle(fn, delay, atleast) {//函數綁定在 scroll 事件上，當頁面滾動時，避免函數被高頻觸發，
var timeout = null,//進行去抖處理
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'images/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首頁的頁面圖片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
//函數節流（throttle）與函數去抖（debounce）處理,
//500ms 的延遲，和 1000ms 的間隔，當超過 1000ms 未觸發該函數，則立即執行該函數，不然則延遲 500ms 執行該函數
</script>
</body>
</html>