有个文章中图片的懒加载lazyload.js的疑问？

发布于 2022-09-01 22:34:52 字数 403 浏览 16 评论 0

修改目标img元素的src属性为orginal属性，从而中断图片的加载。

lazyloa的使用需要这样啊，需要增加一个orginal属性指向原图啊，那我文章中的图片，岂不是需要在服务器端用正则处理一下吗，这多麻烦啊！！！

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗？

js不是有个页面加载完毕（html加载完毕，但资源没开始加载的事件吗？好像是onreadystatechange啥玩意的，忘了）我都晓得有这样的事件，lazyloa难道不知道吗，还需要img配合它，想的太美了吧，我都知道这样改img，还要你lazyloa干嘛，写个滚动事件不就完事了吗？

求大神指点啊！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鲜肉鲜肉永远不皱 2022-09-08 22:34:52

lazyloa的使用需要这样啊，需要增加一个orginal属性指向原图啊，那我文章中的图片，岂不是需要在服务器端用正则处理一下吗，这多麻烦啊！！！

图片lazyload就需要这样，这个和服务器没有任何关系。服务器端写正则干什么？

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗？

orginal属性指向原图就是达到这个目的的啊，orginal这个属性是img标签没有的，浏览器DOM解析器只是当成一个普通的用户自定义属性，不会将其当成src属性那样去加载图片信息

js不是有个页面加载完毕（html加载完毕，但资源没开始加载的事件吗？好像是onreadystatechange啥玩意的，忘了）我都晓得有这样的事件，lazyloa难道不知道吗，还需要img配合它，想的太美了吧，我都知道这样改img，还要你lazyloa干嘛，写个滚动事件不就完事了吗？

这段有点不理解，是可以通过监听页面滚动事件将lazyload激活，加载真实的图片数据，通过将orgina属性值赋给src属性

例如下:
初次页面加载的时候加载到的DOM元素是这样的
<img src="loading.gif" orginal="realImageFilePath">
那么当页面加载的时候，回去加载loading.gif，而这个文件通常就很小，能够马上加载
这样当不需要图片显示的时候，例如图片在页面的中下部，用户还没有滚动到指定位置时候，这是的图片数据就不需要加载，减少页面流量及页面的渲染数据，window.onload事件监听能更快的得到响应。这个和documentonready事件无关。
当需要显示图片的时候，也就是用户滚动到页面特定位置的时候，通过JS将img的src属性指向orginal属性的值，同时可将orginal属性删除
<img src="realImageFilePath" >
此时img指向真实的地址，图片数据才开始加载

为什么要设置original属性来实现lazyload

浏览器中几乎所有操作(除了网络操作)都是在单线程中进行的。网络操作可由多个并行线程执行。并行连接数是有限的(通常为 2 至 6 个,以 Firefox 3 为例是 6 个)。
主线程有个一个事件循环，是一个无限循环,永远处于接受处理状态,并等待 事件(如布局和绘制事件)发生,并进行处理。
那么图片资源的加载就是一个网络操作，当浏览器解析到一个img标签时，就会用src指定的网络地址去加载图片信息，而不是等到documentonready事件监听执行完毕后再去加载资源，所以为了实现lazyload（不加载真实的图片资源），需要设置一个自定义属性来保存真实地址，在需要显示的时候再设置到src属性上

我们可以做个简单的实验，看src是不是会被加载请求：
如下：
页面执行后，我们能chrome的资源控制台能看到
Failed to load resource: the server responded with a status of 404 (Not Found)
的提示信息
所以错误的资源请求还是发生了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
       //documentonready
        $(function(){
            //在其中修改src属性值，以期实现在documentonready中修改omg src为一个占位图片
            //而不加载真实图片数据
            $('img').each(function(index,item){
                $(item).attr("original",$(item).attr('src'));
                $(item).attr("src","http://sfault-avatar.b0.upaiyun.com/305/423/3054230534-561d20a868d2e_big64");
            });
        });

    </script>
</head>
<body>
<!--错误的图片地址-->
<img src="http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud1000001111.png" >
</body>
</html>

回复收藏 0