首页 > 有个文章中图片的懒加载lazyload.js的疑问?

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

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

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

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

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

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

求大神指点啊!


lazyload 本身只是个辅助,当然其功能直接手写代码能实现. 你非要让它来完成它力所不能及的事情自然是不行的.


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>
【热门文章】
【热门文章】