javascript实现图片预加载和懒加载

2023-07-04 06:43:03 210

本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码，供大家参考，具体内容如下

预加载

预加载是预先加载好后面需要用到的资源,后面使用的时候直接去缓存里取。举个栗子,比如一个网站的开场动画,这些动画是由很多图片组成的,假如不预先加载好,那就会造成动画不流畅产生闪动白屏。图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，保证了图片快速、无缝地发布，使用户在浏览你网站内容时获得更好的用户体验。

//这里我把图片数量写死了，而且对图片名也有要求必须是阿拉伯数字后缀为jpg
//下面注释还会介绍另一种方法,两者选一个就行，当然也可以把你的方法留在评论区共同学习
functionpreload(){
for(vari=1;i<13;i++){
varimg=[];
img[i]=newImage();//创建一个img对象
img[i].src="img/"+i+".jpg"
}
}
/*functionpreload(){
img1=newImage();//创建一个img对象
img1.src="xxx/xxx/xxx.jpg"//图片地址
img2=newImage();
img2.src="xxx/xxx/xxx.jpg"
img3=newImage();
img3.src="xxx/xxx/xxx.jpg"
img4=newImage();
img4.src="xxx/xxx/xxx.jpg"
......
}
}*/

//定义了一个函数，带一个参数fun
functionaddLoadEvent(fun){
//把已经加载完成的函数赋值给oldnload变量
varoldonload=window.onload;
if(typeofwindow.onload!='function'){
window.onload=fun;
}else{
window.onload=function(){
//这里执行了刚才赋值变量的函数
oldonload();
//这里是执行了传进来的func参数
fun();
}
}
}
addLoadEvent(preload());
/*
oldonload是自己定义的变量，并给他赋值了onload事件，onload事件会在页面或图像加载完成后立即发生。
onload是在页面和图像加载后执行的事件，但在实际使用中若多次给onload赋值，则onload会被后复制的方法给覆盖，也就意味着onload只会执行最后赋值的方法。
fun()是传入的参数，此处fun()就是preload()。
这段代码表达的含义就是：
如果(typeofwindow.onload!='function')也就是说window.onload还没有被赋值，就直接把它赋值为fun。
否则，说明有程序先对其赋值了，那么在页面加载完成之后，应该先执行现有函数再执行自己的新的fun。
即，此段代码保证了onload中原有加载的方法执行（且先执行），防止fun方法执行（图片预加载）时将其覆盖。
*/

这里可以看到图片已经经加载出来了

懒加载

可以有效避免同一时间浏览器需要加载过多的图片，同时开启过多的http请求，导致网页加载速度变慢。

/*
先将照片路径存放在一个自定义属性中，src中存放一个正在加载的gif，等图片到了显示区域时再用js将自定义属性替换到src里，图片显示出来。
将所有需要按需加载的图片获取到一个集合，滚动滚动条的时候判断哪些图片出现在了可视区域内，出现了就执行一个加载的操作。
加载完成后就将这个图片移出集合或者数组中去，最后数组内需要加载的图片就会越来越少。
*/

不光是图片，js，css文件等都可以按需加载，创建一个script或者link标签，让后在里面添加要呈现的效果，添加到body或者header里面，执行完滚动事件后js或者css文件已经加载完成，移除屏幕滚动事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

javascript实现图片预加载和懒加载

热门推荐

随机推荐