当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery.lazyload滚动不起作用

jquery.lazyload滚动不起作用

2019年02月28日  | 移动技术网IT编程  | 我要评论

brt厦门,codysafe,水宜生s520

　　昨天同事在开发图片懒加载功能时用到了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　

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网