首屏优化图片懒加载

JohnLui 发布于2019-08-23 13:54 / 2254人阅读

图片懒加载有几个重要的点:

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);

当然这样监听滚动肯定耗费性能，建议加上节流。可参考上一篇文章

海外云主机云服务器 js图片懒加载 js实现数据的懒加载图片首屏加载懒加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99764.html

“瀑布流式”图片懒加载代码解析及优化(二)

摘要：之前写过一版图片懒加载的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇瀑布流式图片懒加载代码示例再来看看图片懒加载的一些知识。之前写过一版图片懒加载的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇《瀑布流式图片懒加载代码示例》再来看看图片懒加载的一些知识。图片...

appetizerio 2019-08-19 17:39 评论0 收藏0
一个简单的图片懒加载

摘要：一个简单的图片懒加载所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。本文仅仅简单的举例图片的懒加载，是性能优化的入门的篇章，方法比较简单明了，只要有一点基础就一定能看懂。一个简单的图片懒加载所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。比如一个电商网站，首屏通常有很多的数据，清晰度较高的...

RaoMeng 2019-08-02 16:05 评论0 收藏0
一个简单的图片懒加载

摘要：一个简单的图片懒加载所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。本文仅仅简单的举例图片的懒加载，是性能优化的入门的篇章，方法比较简单明了，只要有一点基础就一定能看懂。一个简单的图片懒加载所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。比如一个电商网站，首屏通常有很多的数据，清晰度较高的...

ephererid 2019-08-23 11:53 评论0 收藏0