图片懒加载有几个重要的点:
1. 图片 的src放到其他属性上,加统一的类名,供选择和 加样式,比如:2. js懒加载函数
有几个重点:
获取可视区域的高度,ie9+ 用window.innerHeight
viewHeight = window.innerHeight || window.documentElement.clientHeight
获取当前元素距离可视区域顶部的高度用 getBoundingClientRect().top
getBoundingClientRect 和 clientHeight的关系
当getBoundingClientRect().top 小于 viewHeight的时候,给元素的src 赋值
ele.src = ele.getAttribute("data-src");
最后就是监听滚动事件了
lazyload完整版function lazyload() { const viewHeight = window.innerHeight || window.documentElement.clientHeight; let imgs = document.querySelectorAll(".pic"); let num = 0, len = imgs.length; for(let i = num; i < len; i ++) { if(imgs[i].getBoundingClientRect().top < viewHeight) { console.log("i", i); imgs[i].src = imgs[i].getAttribute("data-src"); num += 1 ; } } } window.addEventListener("scroll", lazyload);
当然这样监听滚动肯定耗费性能,建议加上节流。可参考上一篇文章
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99764.html
摘要:之前写过一版图片懒加载的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇瀑布流式图片懒加载代码示例再来看看图片懒加载的一些知识。 之前写过一版图片懒加载的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇《瀑布流式图片懒加载代码示例》再来看看图片懒加载的一些知识。 图片...
摘要:一个简单的图片懒加载所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。本文仅仅简单的举例图片的懒加载,是性能优化的入门的篇章,方法比较简单明了,只要有一点基础就一定能看懂。 一个简单的图片懒加载 所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。其选择的重要的部分先加载,次要的部分需要的时候再加载。比如一个电商网站,首屏通常有很多的数据,清晰度较高的...
摘要:一个简单的图片懒加载所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。本文仅仅简单的举例图片的懒加载,是性能优化的入门的篇章,方法比较简单明了,只要有一点基础就一定能看懂。 一个简单的图片懒加载 所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。其选择的重要的部分先加载,次要的部分需要的时候再加载。比如一个电商网站,首屏通常有很多的数据,清晰度较高的...
阅读 537·2023-04-26 02:58
阅读 2236·2021-09-27 14:01
阅读 3540·2021-09-22 15:57
阅读 1141·2019-08-30 15:56
阅读 1005·2019-08-30 15:53
阅读 744·2019-08-30 15:52
阅读 603·2019-08-26 14:01
阅读 2119·2019-08-26 13:41