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

2024年4月27日 100次阅读 来源: 张丽娟 
最近写公司的项目的时候遇到一个关于图片加载的问题，所做的页面是一个商城的商品列表页，其中需要显示商品图片，名称等信息，因为商品列表可能会很长，所以其中图片需要滑到可以显示的区域再进行加载。
首先我的图片加载插件使用的是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

    原文作者：张丽娟
    原文地址: https://segmentfault.com/a/1190000010572069
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞