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
jquery.lazyload滚动不起作用的更多相关文章
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- jquery.lazyload插件实现图片延迟加载详解
什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 ...
- jquery.lazyload(懒加载)的使用与配置
jquery lazyload是一款基于jquery框架的图片延迟加载应用,它可以让用户访问页面的时候只显示当前屏幕所示的图片.原理为利用JS替换图片src为loading图片,新data-origi ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload
Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload使用及源码分析
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...
随机推荐
- ubuntu-ln命令
安装软件完成后,常常需要使用ln命令来将命令重新定义一下路径,就相当于windows中的加入系统环境变量的意思 ~ sudo ln -s /home/spike/Downloads/redis/src ...
- 优酷土豆资深工程师:MySQL高可用之MaxScale与MHA
本文根据DBAplus社群第67期线上分享整理而成 本次分享主要包括以下内容: 1.MySQL高可用方案 2.为什么选择MHA 3.读写分离方案的寻找以及为什么选择Maxscale 一.MySQL ...
- 用hadoop实现SimRank++算法(1)----权值转移矩阵的计算
本文主要针对广告检索领域的查询重写应用,依据查询-广告点击二部图,在MapReduce框架上实现SimRank++算法.关于SimRank++算法的背景和原理请參看前一篇文章<基于MapRedu ...
- 如何构建一个轻量级级的DI(依赖注入)
概念:依赖注入与IOC模式类似工厂模式,是一种解决调用者和被调用者依赖耦合关系的模式:它解决了对象之间的依赖关系,使得对象只依赖IOC/DI容器,不再直接相互依赖,实现松耦合,然后在对象创建时,由IO ...
- 【cl】工程导入
File>Open 导入成功
- 【cl】Red Hat Linux虚拟机安装Vmware Tools
1.选择虚拟机,选中导航栏虚拟机>VMware Tool安装 选择右键>extract to 选择/home,新建了自己的文件夹,然后点击extract 一直enter,一直到 然后reb ...
- Linux命令(八)——vi编辑器的使用
vi编辑器是linux系统下的标准正文编辑器,有三种基本模式:命令行模式.插入模式和底行命令模式. 1.命令行模式:控制屏幕光标的移动,字符.字或行的删除,移动复制某区段及进入插入模式或底行命令模式下 ...
- Spring+EhCache缓存实例(具体解说+源代码下载)
一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有高速.精干等特点,是Hibernate中默认的CacheProvider.Ehcache是一种广泛使用的开源Java分布式 ...
- SUSE glibc升级为2.18过程记录
先验知识:1.运行时,动态库的装载依赖于ld-linux.so.6的实现,它查找共享库的顺序如下:(1)ld-linux.so.6在可执行的目标文件中被指定,可用readelf命令查看(2)ld-li ...
- nyoj--44--子串和(动态规划)
子串和 时间限制:5000 ms | 内存限制:65535 KB 难度:3 描述 给定一整型数列{a1,a2...,an},找出连续非空子串{ax,ax+1,...,ay},使得该子序列的和最大, ...