JS经典实例网站首页 JS经典实例

javascript学习笔记-延迟加载(每次只加载可见区域)

发布时间：2018-04-05 18:28:57编辑：雪饮阅读（）

延迟加载

页面中有太多高清大图，并且页面比较长要滚动好久才翻到页面底部，若一次性加载完毕对服务器性能损耗是很大的。

那么我们就采用延迟加载，每次只加载用户可见区域的部分即可。

实现思路：

对每个img标签预留一个属性用来存储真正高清大图的地址，然后通过滚动高度scrollTop与浏览器可视区域高度innerHeight并结合图片的offsetTop来判断是否到达图片的可视区域。

达到或超过可视区域则加载高清大图，没有达到则还是原来的初始化的图片。

这里不用担心当你达到可视区域时候高清大图由于没有即时加载进来而同时初始化图片又被替换的尴尬，其实这里虽然执行了更换图片的操作，但实际上则是在高清图片真正加载后才进行更换的。

代码实现：

<!doctype html>

<html>

<head>

<title>雪饮个人博客</title>

<style>

div{font-size:100px;}

img{width:100%;height:auto;display:block;}

</style>

window.onload=function(){

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

window.addEventListener("scroll",function(){

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var currentH=innerHeight+scrollTop;

for(var i=0;i<imgs.length;i++){

if(currentH>=imgs[i].offsetTop){imgs[i].src=imgs[i].getAttribute("xsrc");}

}

},false);

}

</script>

</head>

<body>

<div>鼠标滚动下面图片区域就加载图片</div>

</body>

</html>

关键字词：javascript,延迟加载