图片预加载和懒加载

预加载技术

 

var img=new Image();

console.log(img);

//图片预加载

//new Image对象 将image对象的src指向图片地址 当需要加载图片的时候将image的src 赋予真实的图片src

img.src="./imgs/13.jpg";

img.onload=function(){

// alert('加载成功');

document.getElementsByClassName('top')[0].src=img.src;

};

 

懒加载

 

获取图片，滚动事件中计算图片的位置，如果在可视区域，在实现存放在img标签上的图片路径赋值到img标签的src上即可。

  

var num = document.getElementsByTagName('img').length;

var img = document.getElementsByTagName("img");

var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

lazyload(); //页面载入完毕加载可是区域内的图片

window.onscroll = lazyload;

function lazyload() { //监听页面滚动事件

var seeHeight = document.documentElement.clientHeight; //可见区域高度

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度

for (var i = n; i < num; i++) {

if (img[i].offsetTop < seeHeight + scrollTop) {

if (img[i].getAttribute("src") == "") {

img[i].src = img[i].getAttribute("data-src");

}

n = i + 1;

}

}

}

 

参考链接 https://www.cnblogs.com/tiangeng/p/10084279.html