所以，你应该在ajax返回图片路径，并添加到页面上之后，在执行懒加载初始化的语句。希望能帮到你。【我只是猜测】
Lazy Load这个jQuery插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。如果一个人不看下面的图片，那加载下面的图片就是一种浪费。 Lazy Load 插件原理 修改目标 img 的 src 属性为 orginal 属性，从而中断图片的加载。检测滚动状态，然后把可视网页中的 img 的 src 属性还原加载图片，制造缓冲加载的效果。 但是现在，很多javascript大牛分析得出，这个插件其实并没有真正的缓加载效果。确实是这样，官方也已经给出了说明和解决方法了。 问题原因：在新版的浏览器中，即使你删除了 Javascript 控制的 src 属性，浏览器仍然会去加载这个图像。 解决方法：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。 例如：<img data-original=“img/example.jpg” src=“img/grey.gif”> 这样我们就需要先分析一下插件的优缺点，再决定是否要使用。 使用： 1.必须按照这种结构才有实际作用，需要对输出进行定义。 2.可以节约服务器资源，并且有较好的用户体验。 3.如果图片很大，当用户滚动到目标位置，需要较长时间下载。 不使用： 1.增加服务器压力，浪费系统资源。 究竟使用不使用，还是要看你自己的实际需求。如果你图片比较少，就不必使用了，如果你图片比较多，可以考虑一下。但是，使用的话，你可能需要把每一 个img 标签上自己加上这个属性，会稍微麻烦一点。潜行者m博客上，就用了这个插件，不过没用使用官方说的那种结构，要的只是一个缓冲加载的效果。 开始使用 lazyload.js 第一步：加载相关文件。 很明显，你要加载jquery和这个插件。你可以使用以下代码，加载这几个文件： <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> 第二步：定义图片结构。 按照官方的建议，定义你的img结构： <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> 第三步：触发这个插件，生效。 激活以下，你就可以在目标中使用了。 $("img.lazy").lazyload() lazyload.js 高级使用方法： 下面部分来自官方文档，将官方文档进行了一下简单的翻译。 更周全的做法 我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。 应对这个问题，我们需要引入noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。对现有图像，隐藏处理，使用 show()方法触发显示。这样，如果浏览器不支持 Javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下： <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480"> <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript> <script type="text/javascript"></script>$("img.lazy").show().lazyload()</script> 提前加载 默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。 $("img.lazy").lazyload({ threshold : 200 }) threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。 自定义触发事件 默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。 $("img.lazy").lazyload({ event : "click" }) 自定义显示效果 默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置 effect 属性，来控制显示图片的效果。例如 $("img.lazy").lazyload({ effect : "fadeIn" }) fadeIn的效果就是，改变图片的透明度，渐现的方式出现。效果： effect demo page 把图像插入某个容器 大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。效果：vertical #container { height: 600pxoverflow: scroll}$("img.lazy").lazyload({ container: $("#container") }) 加载不可见图像 有部分图像是不可见的，我们对其加上类似 display：none 等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像，我们需要将 skip_invisible 设置为 false $("img.lazy").lazyload({ skip_invisible : false }) 作者：潜行者m 文章来源：我爱水煮鱼，转载请注明出处。LazyLoad依赖于jQuery.请将下列代码加入页面head区域:你必须修改HTML代码.在src属性中设置展位符图片,demo页面使用1x1像素灰色GIF图片.并且需要将真实图片的URL设置到data-original属性.这里可以定义特定的class以获得需要延迟加载的图片对象.通过这种方法你可以简单地控制插件绑定.处理图片的代码如下.$("img.lazy").lazyload()这将使所有class为lazy的图片将被延迟加载.可以参考基本选项demo设置敏感度几乎所有浏览器的JavaScript都是激活的.然而可能你仍希望能在不支持JavaScript的客户端展示真实图片.当浏览器不支持JavaScript时优雅降级,你可以将真实的图片片段在写标签内.可以通过CSS隐藏占位符..lazy{display:none}在支持JavaScript的浏览器中,你必须在DOMready时将占位符显示出来,这可以在插件初始化的同时完成.$("img.lazy").show().lazyload()这些都是可选的,但如果你希望插件平稳降级这些都是应该做的.设置敏感度默认情况下图片会出现在屏幕时加载.如果你想提前加载图片,可以设置threshold选项,设置threshold为200令图片在距离屏幕200像素时提前加载.$("img.lazy").lazyload({threshold:200})占位图片你还可以设定一个占位图片并定义事件来触发加载动作.这时需要为占位图片设定一个URL地址.透明,灰色和白色的1x1象素的图片已经包含在插件里面.事件触发加载事件可以是任何jQuery时间,如:click和mouseover.你还可以使用自定义的事件,如:sporty和foobar.默认情况下处于等待状态,直到用户滚动到窗口上图片所在位置.在灰色占位图片被点击之前阻止加载图片,你可以这样做:$("img").lazyload({placeholder:"img/grey.gif",event:"click"})使用特效当图片完全加载的时候,插件默认地使用show()方法来将图显示出来.其实你可以使用任何你想用的特效来处理.下面的代码使用FadeIn效果.这是效果演示页面.$("img.lazy").lazyload({effect:"fadeIn"})
