图片预加载和懒加载的实现方法

时间:2021-12-10 19:22:28

图片预加载即提前加载图片,可保证图片快速、无缝地发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。

方法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>