js实现图片layz loading的原理？

Question

求大神详细解释下图片layz loading的原理,只求简单讲明原理即可。最好贴上代码！！谢谢！！！

Answer 1

原始标签：<img src="1.jpg">
文档加载后用js修改为：
<img original="1.jpg" src="/inc/lazyload/grey.gif">
“/inc/lazyload/grey.gif”是一张loading效果的小图片，达到默认不加载原始图片作用，当滚动条滚动，判断到此img已经出现在可视范围内，再把 src1的值执行异步加载，当图片加载完后马上还原给src即可看到原始图片。
所以我们滚动网页时开始是看到grey.gif的小图片，此时原始图片开始加载，载完后一下变出来。

Answer 2

首先尚未在可视范围内的图片都一个简单的图片替代 比如 正在加载的图片或者透明的很小的图片之类的，然后真实图片的路径可以放在自定义的属性上，或者放在js中的json类似的变量中（存在变量中就得有编号进行关联才知道那个图片是那个img的），然后当由于向下滚动而使图片的位置处于可视范围时就将img的路径修改为真实图片的路径就行了

Answer 3

能不能丢段代码出来看看？这么说我理解的不是太懂，还有那个original="1.jpg"是干什么用的？一直没遇到过这个标签！谢谢了哈！

Answer 4

ImageLazyLoad技术就是，当前可是界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
代码参考
【关于图片延迟加载技术-ImageLazyLoad】

Answer 5

代码楼上有，或者你直接下载jq_lazyload源文件
original="原始图片地址.jpg" 这只是自定义的一个标签，用来保存真实图片地址，因为src="原始图片地址.jpg" 会立刻加载图片，所以才自定一个original属性。

Answer 6

我想问就是你这种：<img original="1.jpg" src="/inc/lazyload/grey.gif">那还是不能实现图片延迟加载啊，你只是用一张图片代替了另外一张图片，这种当第一次读取页面的时候还得加载那么多图片啊

Answer 7

<img original="1.jpg" src="/inc/lazyload/grey.gif">这种格式默认就只加载一张图片，实际的图片存储在original里面，并不会加载，而是通过添加scroll事件判断加载了lazyload效果的对象是否在可见区域，是就替换src为自定义original定义的值实现图片加载如果src直接存储实际图片，那么就会加载图片，lazyload会打断图片加载，如果图片大效果还是很明显的，不大没什么意义

Answer 8

白费这么多口水，grey.gif是这个插件的一张很小的loading图片，它当然是直接加载，当占位符与做效果用。而我们真正要延迟加载的是1.jpg(视情况而变化的图片地址）

Answer 9

var Layz = {
name:'qq',
show:function(){
alert( 'ok' );
},
scrol:function(){
var that = this;
window.onscroll = function(){
if( that.name == 'qq' ){
that.show();
}
}
}
}
Layz.scrol();
好，代码如上，然后我要在那个window.onscroll里面调用show()方法和name属性的时候直接这种：
var Layz = {
name:'qq',
show:function(){
alert( 'ok' );
},
scrol:function(){
//var that = this;
window.onscroll = function(){
if( this.name == 'qq' ){
this.show();
}
}
}
}
Layz.scrol();
这种是不行的，但是上面的那段代码可以，请问这是为什么啊？？

Answer 10

(⊙o⊙)…  我明白了，因为当滚动的时候this的指向变了，然后that是保存了上一个的对象，这样才能操作上一个对象中的属性和方法！！