昨天同事在开发图片懒加载功能时用到了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. magento 在全站或者某页面增加外联js或者css的方法

    1,在整站末尾增加外联资源 找到当前主题的布局文件cms.xml,在<default></default>添加如下代码: <reference name="be ...

  2. magento 的一些Sql查询

    1,模拟使用getName()获取产品名称的sql SELECT `value` AS product_name FROM yo_catalog_product_entity_varchar WHER ...

  3. kettle 递归循环

    var i = new Number(parent_job.getVariable(; parent_job.setVariable("i",i); true;

  4. MySQL Workbench出现:Error Code: 2013. Lost connection to MySQL server during query的问题解决

    解决办法: [Edit]->[Preference]->[SQL Editor] 将下图DBMS connection read time out (in seconds)适当调大: 参考 ...

  5. mysql 安装完毕后登陆不了mysql的 shell 即mysql&gt;遇到:ERROR 1045 (28000): Access denied for user 'root'@'localhost‘

    [root@hzswtb2-mpc ~]# mysql ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using pas ...

  6. android 百度地图 定位功能

    废话不多说 直接新建一个新android项目:location,然后花一分钟申请一个key,然后就是把百度定位demo抄一下即可 1:首先在AndroidManifest.xml中加入权限 <u ...

  7. 远程桌面授权server没有提供许可证问题解决方法

    今天远程server报如图所看到的错误,网上查找的方法 方法一:(亲測有效) mstsc /V:192.168.0.3 /admin  方法二:(因为server正在使用中,未作測试) 删除远程桌面服 ...

  8. Linux 查看负载

    top  iostat -x 1 10 free uptime cat /proc/cpuinfo cat /proc/meminfo src lsof 1,查看磁盘 df -h 2,查看内存大小 f ...

  9. JavaScript:DOM对象

    ylbtech-JavaScript:DOM对象 1. HTML DOM Document 对象返回顶部 1. HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM ...

  10. WPF中ListBox ListView数据翻页浏览笔记(强调:是数据翻页,非翻页动画)

    ListBox和ListView在应用中,常常有需求关于每页显示固定数量的数据,然后通过Timer自动或者手动翻页操作,本文介绍到的就是该动作的实现. 一.重点 对于ListBox和ListView来 ...