ajax+lazyload时lazyload失效问题及解决

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax+lazyload时lazyload失效问题及解决相关的知识,希望对你有一定的参考价值。

最近写公司的项目的时候遇到一个关于图片加载的问题,所做的页面是一个商城的商品列表页,其中需要显示商品图片,名称等信息,因为商品列表可能会很长,所以其中图片需要滑到可以显示的区域再进行加载。
首先我的图片加载插件使用的是jquery的lazyload,
**一般情况下:**
使用lazyload,只需要引入相关文件(当然jquery也要提前引入)
<script src="../js/jquery.lazyload.js"></script>
然后在html的img标签中加入类名:lazy,图片的地址使用:data-original = “XXXXXXXXX”,最后再js中加上
$(function(){
    $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#lazycontainer")
    }); 
})

这里设置了图片加载进来显示是渐现的效果,以及包裹整个商品列表的容器container

以上是关于ajax+lazyload时lazyload失效问题及解决的主要内容,如果未能解决你的问题,请参考以下文章

使用ajax后lazyload.js失败怎么办?

jquery.lazyload 懒加载失效,图片无法加载

关于ajax实现div的Lazyload

避免lazyloader属性

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

lazyload.js详解