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