lazyload总是一次性加载了所有的图片

我是做一个产品详情页，移动端的，希望图片能够延迟加载，lazyload应该是在可视范围内加载一定的图片吧，这个应该没有理解错吧，先上代码，再说明具体问题

$(".prodetail").load(prd.prddesc_url,{num_iid: global.num_iid,type:"lazyload"}, function(response, status, xhr) {
                    $(".prodetail img").lazyload({
                      effect:'fadeIn' 
                    });
});

图片就在prodetail 这个里面，因为是请求的产品的详情，具体请求就没有data-original这样的，正常使用ajax请求后的结果是这样的

然后就使用的load type="lazyload" 使页面一开始代码就会变成这样的

开始是没有加载的，问题来了，我一滚动，prodetail里面20多张图片就统统加载了，全部变成

是全部，所有图片全部加载了，怎么看都没有用到lazyload的感觉，希望大神帮忙找找答案

---

PC端的可以参考http://www.zhangxinxu.com/wordpress/2010/11/jquery%E9%A1%B5%E9%9D%A2%E5%9B%BE%E7%89%87%E7%AD%89%E5%85%83%E7%B4%A0%E6%BB%9A%E5%8A%A8%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%AE%9E%E7%8E%B0/

移动端的话，由于国内的电信网络性价比的限制，和手机处理能力的差异，在设计一个无线应用的时候，为用户节省流量是一个非常重要的考虑因素，可以看一下这个：http://varyu.com/notes/lazyload.html

---

参考这篇:http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html

$(".prodetail img").lazyload({
                      effect:'fadeIn' 
                    });

没用过jquery lazyLoad，但看文档 jquery lazyLoad 是页面加载完后再加载图片，当然可以进行各种设置。

参考网上资料

$(“img”).lazyload({ threshold : 200 });   

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$("img").lazyload({    
placeholder : "img/grey.gif",    
event : "click"   
});   

还可以通过定义effect 参数来定义一些图片显示效果

$("img").lazyload({    
placeholder : "img/grey.gif",    
effect : "fadeIn"   
});   

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({    
placeholder : "img/grey.gif",    
event : "click"   
});   

楼主想要的效果应该是类似这种 jQuery页面滚动图片等元素动态加载实现

这个用 scrollLoading 这类插件比较方便。

---

自己通过别的地方示例，自己找到了答案，因为我的lazyload用的图片是1px ，然后img又不是width100%，导致即使有二三十张图片，所有图片也都在可视范围内，所以一滑动就全部加载了，lazyload的原理还是没有理解错，它是加载可视范围内的图，我这个就是在这个上面挖了坑，这样知道怎么回事了，解决方法就很多啦，最简单图片设个100%宽度，不在可视范围内的图片就不会加载

---

juqery-lzayload.js 我也试过，确实很坑爹，压根不能实现图片的懒加载。之前用过echo.js，很轻量级，可以上github搜一下，当然，也可以自己写一个。