昨天同事在开发图片懒加载功能时用到了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. 消息队列Rabbit安装

    先安装elang 再安装Rabbit *Rabbit安装路径不能有空格 安装完成

  2. 洛谷——P1094 纪念品分组

    https://www.luogu.org/problem/show?pid=1094#sub 题目描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得 的纪念品价 ...

  3. 反射常用API

    反射所有功能都是通过class API来实现的 class常用API有: 1.class.GETINTERFACES():获得这个类实现的接口. 2.class.getMethods() Method ...

  4. POJ 3905

    加深了对有向边意义的理解了.2-SAT #include <iostream> #include <cstdio> #include <cstring> #incl ...

  5. pl/sql developer 自动输入替换 光标自动定位

    pl/sql developer 自动输入替换 工具->首选项->用户界面->编辑器->自动替换,自己定义一些规则,然后输入key,点击tab或者空格,就可以进行替换了: SL ...

  6. STM32F4——GPIO基本应用及复用

    IO基本应用 一.IO基本结构: 针对STM32F407有7组IO.分别为GPIOA~GPIOG,每组IO有16个IO口,则有112个IO口. 当中IO口的基本结构例如以下: 二.工作方式: ST ...

  7. 2017-3-13 leetcode 4 11 15

    ji那天居然早起了,惊呆我了,眼睛有点儿疼,一直流泪....继续保持 ========================================================== leetco ...

  8. FH Admin

    http://www.360doc.com/content/14/0713/08/8072791_394027312.shtml

  9. k8s Gitlab CI/CD 之自动编译Docker镜像并推送到指定的Registry

    环境介绍: 说明 节点 ip 系统 Gitlab Server git.ds.com 10.0.1.179 CentOS 7.5.1804 Gitlab Runner   10.0.1.178 Cen ...

  10. [WebServer] Windows下Apache与Tomcat的整合

    转自:http://bbs.blueidea.com/thread-2873268-1-1.html 准备工作:1. Apache 2.2.4下载地址:http://cztele1.skycn.com ...