ajax+lazyload时lazyload失效问题及解决
生活随笔
收集整理的這篇文章主要介紹了
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失效问题及解决的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript中的argument
- 下一篇: ActiveReports 报表控件官方