jquery.lazyload滾動不起作用


  昨天同事在開發圖片懶加載功能時用到了lazyload,使用相當標准,然而結果卻不如人意,在滾動時未能起作用。引用https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js,打斷點測試,也沒有發現捕獲到滾動事件,感覺奇怪,於是在控制台添加如下事件:

window.onscroll=function(){alert(123);}

發現也沒有起作用,這才注意到是由於滾動事件無效,那么滾動事件無效會是有哪些原因造成的呢?搜索了一下,發現主要有如下兩周情況:

  1、設置了height:100%

  2、元素設置了overflow:scroll/auto

  於是將凡是有height:100%的樣式先注釋掉,發現依然不行,又找到overflow:scroll樣式,想去掉這個樣式,結果發現沒有滾動條了。不禁嘆息,難道有這個樣式就無法懶加載了嗎?隨意瀏覽了一下lazyload的源代碼,突然眼前一亮,當前圖片實際上在一個容器中,只要捕獲容器的滾動事件即可,而lazyload中具有container屬性,那么用了這個屬性后是不是就可以了呢?經過測試,發現確實可以了。使用方式如下:

$("img.lazy").lazyload({ 
container: $("#container") 
}); 

   該問題如此周折,暴漏了自己在html、css上的不足,需要着重彌補。

   另外,今天發現了一篇博客,詳細介紹了lazyload,其中包括容器屬性的使用,地址如下:

   https://www.jb51.net/article/31594.htm 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM