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

jquery.lazyload滚动不起作用的更多相关文章

  1. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  2. jquery.lazyload插件实现图片延迟加载详解

    什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 ...

  3. jquery.lazyload(懒加载)的使用与配置

    jquery lazyload是一款基于jquery框架的图片延迟加载应用,它可以让用户访问页面的时候只显示当前屏幕所示的图片.原理为利用JS替换图片src为loading图片,新data-origi ...

  4. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  5. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. jQuery.lazyload

    Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...

  7. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. jQuery.lazyload使用及源码分析

    前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...

随机推荐

  1. mysql 易错误理解

    MySQL作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己踩坑. ...

  2. chrome 插件开发2

    登录 | 注册   基础文档 综述 调试 Manifest 文件 代码例子 模式匹配 分类索引 改变浏览器外观 Browser Actions 右键菜单 桌面通知 Omnibox 选项页 覆写特定页 ...

  3. Cocos2d-x 3.0final 终结者系列教程13-贪食蛇游戏案例(全)

    快过节了.谢谢了屈原,我们爱你. 应该多几个向屈大人一样跳江的,这样我们就能够放假纪念啦. ---------------------------------快过节了.弄个案例,大家最好还是假期做做, ...

  4. Qt的Socket数据通讯的一个样例。

    QTcpServer类 用来侦听port ,获取QTcpSocket. QTcpSocket有  connected的信号(已经连接),还有readyread()信号,表示已经有数据发过来了.准备读取 ...

  5. 怎样在Android.mk上加宏定义【转】

    本文转载自:http://blog.csdn.net/ttxgz/article/details/7591282 很简单, LOCAL_CFLAGS += -DWHATEVERDEFINE 就可以了

  6. 写一个类似淘宝的ios app需要用到哪些技术?

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  7. 循环神经网络(RNN, Recurrent Neural Networks)——无非引入了环,解决时间序列问题

    摘自:http://blog.csdn.net/heyongluoyao8/article/details/48636251 不同于传统的FNNs(Feed-forward Neural Networ ...

  8. nyoj--127--星际之门(一)(生成树的数量)

    星际之门(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 公元3000年,子虚帝国统领着N个星系,原先它们是靠近光束飞船来进行旅行的,近来,X博士发明了星际之门,它 ...

  9. Constructing Roads --hdoj

    Constructing Roads Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) ...

  10. Cracking the Coding Interview 5.2

    Given a(decimal -e.g. 3.72)number that is passed in as a string, print the binary representation. If ...