延迟加载图片

longmon 发布于2019-08-21 15:18 / 2355人阅读

摘要：只是一个空标签，内容由定义，浏览器会暂停加载，直到获取和加载完图像。先不给标签加上，直到浏览到了这个位置再加载。第一个问题在于获取图片距离可见范围下边的距离。从而得到距离视图下方的高度。

首先有一个问题

src和href属性都用来包含一些外部的实体，那么有什么区别？

src：source用于替代元素（replaced elements简而言之，就是外观和尺寸由外部资源来定义，有img，button，textarea，input，select，object）。
href：Hypertext Reference，指定了web资源的定位。因此定义了一个连接或者现在元素之间的关系（比如锚和目的地），或者是当前文档（比如link标签）和属性定位的资源间的关系。
所以我们这样写

浏览器就能够理解这是一个样式表，而且解析（parse）页面的时候不会中断（但是可能因为浏览器需要依据样式来绘制渲染界面而中断渲染render）。跟把所有css文件倒到style标签不一样。因此也建议用link，不要用 @import来导样式表。

src属性只是在当前的文本元素定义的地方嵌套了一个资源。
例如当浏览器看到

页面的下载和处理会被终止，直到浏览器获取，编译，执行了文件。类似于把所有的js文件都倾倒在script标签里。img标签也是类似的。只是一个空标签，内容由src定义，浏览器会暂停加载，直到获取和加载完图像。
这也是为什么要把js文件放在body的最后的原因。
参考来自http://stackoverflow.com/ques...

想到了一个有意思的实现。
先不给img标签加上src，直到浏览到了这个位置再加载。对于移动端，还能省流量。

所以来实现一下。
第一个问题在于获取图片距离可见范围下边的距离。
几个尺寸属性参考http://www.jianshu.com/p/187c...
先获取元素距离上边的距离，再获取屏幕可用高度，以及滑动高度。
从而得到距离视图下方的高度。

第二个问题在于节流，总不能每滑动一下都执行一遍。有两个实现。同步和异步的方式各实现了。

handleScroll=(callback)=>{
        let previousCall=new Date().getTime();
        return (e=>{
            let diff=new Date().getTime()-previousCall
            if(diff>INTERVAL){
                callback.apply(null,arguments);
                previousCall=new Date().getTime();
            }
        })
    }
window.addEventListener("scroll",handleScroll(checkImgs));
//或者
let wait=false;
ontimeLoad=(e)=>{
    if(!wait){
      wait=true;
      setTimeout(function(){
        wait=false;
        checkImgs();
      },10);
    }
}
window.addEventListener("scroll",ontimeLoad);

不过第一种的话有个问题，就是不能removeEventListener了

源码：
https://github.com/zxf14/font...

云服务器 GPU云服务器延迟加载图片延迟加载延迟加载技术 javascript延迟加载

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

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

图像延迟加载 && 列表图顺序加载

摘要：此外，跟踪尚未延迟加载的元素数量，以及取消绑定滚动事件处理程序的繁琐工作将由开发者来完成。图像延迟加载列表图顺序加载的组件已经开源啦有兴趣的同学可以查看使用起来非常简单图片延时加载十分重要，尤其是对于移动端用户。从理论上来看，图像延迟加载机制十分简单，但实际上却有很多需要注意的细节。此外，有多个不同的用例均受益于延迟加载。首先，我们来了解一下在 HTML 中延迟加载内联图像。延迟加载...

ghnor 2019-05-23 17:33 评论0 收藏0
延迟加载(Lazyload)三种实现方式

摘要：原文链接延迟加载也称为惰性加载，即在长网页中延迟加载图像。传入一个回调函数，当其观察到元素集合出现时候，则会执行该函数。管理的是一个数组，当元素出现或消失的时候，数组添加或删除该元素，并且执行该回调函数。原文链接 - https://zhuanlan.zhihu.com/p/25455672 延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。...

niuxiaowei111 2019-08-21 15:18 评论0 收藏0
Chrome 75 将原生支持图片的惰性加载

摘要：今天给大家带来好消息是，将原生支持图片的惰性加载，支持对和进行延迟加载，只需要将属性设置为即可。该属性支持标签，无论标签是否含有属性及被标签包裹，以及标签。随着浏览器性能的提升，前端也越来越关注用户体验，而影响用户体验其中一个很重要的指标便是受首屏渲染速度。我们常常会针对样式、脚本、图片、音频、视频等资源做处理，比如针对样式和脚本的压缩合并，将图片合并成雪碧图、将小图转化成base6...

luckyw 2019-08-23 16:54 评论0 收藏0
Javascript设计模式之——代理模式

摘要：最近在读设计模式与开发实践，在这里把文中的各种设计模式写出来，以便加深记忆，也可以分享给初学者。经纪人可以全权代表明星和客户谈判，最后把谈判结果给明星，明星决定签约与否。这也违反了面向对象设计原则中的单一职责原则。最近在读《javascript设计模式与开发实践》，在这里把文中的各种设计模式写出来，以便加深记忆，也可以分享给初学者。如果你不了解设计模式，那么强烈推荐你阅读一下这本书，...

cuieney 2019-08-20 17:07 评论0 收藏0