有个文章中图片的懒加载lazyload.js的疑问？
修改目标img元素的src属性为orginal属性，从而中断图片的加载。
lazyloa的使用需要这样啊，需要增加一个orginal属性指向原图啊，那我文章中的图片，岂不是需要在服务器端用正则处理一下吗，这多麻烦啊！！！
lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗？
js不是有个页面加载完毕（html加载完毕，但资源没开始加载的事件吗？好像是onreadystatechange啥玩意的，忘了）我都晓得有这样的事件，lazyloa难道不知道吗，还需要img配合它，想的太美了吧，我都知道这样改img，还要你lazyloa干嘛，写个滚动事件不就完事了吗？
求大神指点啊！
有个文章中图片的懒加载lazyload.js的疑问？
修改目标img元素的src属性为orginal属性，从而中断图片的加载。
lazyloa的使用需要这样啊，需要增加一个orginal属性指向原图啊，那我文章中的图片，岂不是需要在服务器端用正则处理一下吗，这多麻烦啊！！！
lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗？
js不是有个页面加载完毕（html加载完毕，但资源没开始加载的事件吗？好像是onreadystatechange啥玩意的，忘了）我都晓得有这样的事件，lazyloa难道不知道吗，还需要img配合它，想的太美了吧，我都知道这样改img，还要你lazyloa干嘛，写个滚动事件不就完事了吗？
求大神指点啊！
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" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问？" >
那么当页面加载的时候，回去加载loading.gif，而这个文件通常就很小，能够马上加载
这样当不需要图片显示的时候，例如图片在页面的中下部，用户还没有滚动到指定位置时候，这是的图片数据就不需要加载，减少页面流量及页面的渲染数据，window.onload事件监听能更快的得到响应。这个和documentonready事件无关。
当需要显示图片的时候，也就是用户滚动到页面特定位置的时候，通过JS将img的src属性指向orginal属性的值，同时可将orginal属性删除<img src="realImageFilePath" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问？" >
此时img指向真实的地址，图片数据才开始加载
<code>浏览器中几乎所有操作(除了网络操作)都是在单线程中进行的。网络操作可由多个并行线程执行。并行连接数是有限的(通常为 2 至 6 个,以 Firefox 3 为例是 6 个)。 主线程有个一个事件循环，是一个无限循环,永远处于接受处理状态,并等待 事件(如布局和绘制事件)发生,并进行处理。 那么图片资源的加载就是一个网络操作，当浏览器解析到一个img标签时，就会用src指定的网络地址去加载图片信息，而不是等到documentonready事件监听执行完毕后再去加载资源，所以为了实现lazyload（不加载真实的图片资源），需要设置一个自定义属性来保存真实地址，在需要显示的时候再设置到src属性上</code>
我们可以做个简单的实验，看src是不是会被加载请求：
如下：
页面执行后，我们能chrome的资源控制台能看到Failed to load resource: the server responded with a status of 404 (Not Found)
的提示信息
所以错误的资源请求还是发生了
<code>
<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>
<!--错误的图片地址-->
<img src="http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud1000001111.png" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问？" >
</code>
lazyload 本身只是个辅助,当然其功能直接手写代码能实现. 你非要让它来完成它力所不能及的事情自然是不行的.
