2.图片懒加载原理（原生js实现）

一、场景：

先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。

1、这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。

2、减少了同一时间发向服务器的请求数，服务器压力剧减

二、思想：

在写网页<img>标签是并不会将图片的路径放入src属性，而是自定义一个其他的属性src将路径放入这个自定义属性中，那么在加载页面时，这个图片已开始是无法加载的。而当浏览器的可视区移动到此图片上时，将src的路径赋值给src属性，并开始加载。

三、代码实现：

<style>

img{

width: 200px;

height: 200px;

}

</style>

<body>

<ul>

</ul>

</body>

var imgs = document.getElementsByTagName('img') // 获取所有的imgs标签

var clientH = document.documentElement.clientHeight // 可视区域的高度（是固定的）

// 封装一个函数，获取该元素到文档的距离

function getPos(obj){

var o = {

left:0,

top:0

}

while(obj){

o.left+=obj.offsetLeft

o.top +=obj.offsetTop

obj = obj.offsetParent

}

return o

}

// 滚动时调用的函数

function auto(){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 滚动条的高度（处理了兼容）

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

var img = imgs[i]

var t= getPos(img).top

if(scrollTop+clientH>t+400){

img.src = img.getAttribute('_src')

}

auto()

window.onscroll=auto

</script>

posted @ 2021-02-04 10:28 sunshineG 阅读(75) 评论(0) 编辑收藏举报

刷新页面返回顶部

sunshineG

2.图片懒加载原理（原生js实现）

公告