昨天同事在开发图片懒加载功能时用到了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. T2: 一种能累积计算积分的EC2实例类型

    假设您打算在AWS云端执行一个小型的 Web Server,或是一个小型的数据库,平时并没有大量的工作负载.在绝大多数时间里,您的实例并不须要消耗大量的CPU资源.可是,再不怎么受欢迎的博客也可能会有 ...

  2. 支付宝又惹怒Windows Phone用户了

    支付宝,重新.把WP用户惹怒了. 事情是酱紫的,苹果公布Apple Watch之后.支付宝钱包第一时间在微博上表示:"已经完毕适配Apple Watch版本号的开发工作,中国用户在订购App ...

  3. 在windows下怎样更新vundle?

    本文出自Svitter的blog 更新Vundle的时候.不管是输出BundleInstall.还是PluginInstall! 都会调用系统的git,所以必须安装git才干达到目的更新插件. git ...

  4. 出错Can't convert 'WebElement' object to str implicitly

  5. 浅析hybrid模式下地支付宝钱包和微信

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VuY2hhbzEyNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. Node.js:多进程

    ylbtech-Node.js:多进程 1.返回顶部 1. Node.js 多进程 我们都知道 Node.js 是以单线程的模式运行的,但它使用的是事件驱动来处理并发,这样有助于我们在多核 cpu 的 ...

  7. JS 中构造函数和普通函数的区别(详)

    1.构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写 2.构造函数和普通函数的区别在于:调用方式不一样.作用也不一样(构造函数用来新建实例对象) 3.调用方式不一样. 普通 ...

  8. leetcode 几道题目

    是周六晚上的几道题,晚上11点半,睡的早,起不来! 494. Target Sum 分析:看完这题,看到数据范围,长度20,枚举就是1<<20 = 1e6, 然后单次20,总共就是2e8, ...

  9. Java多线程编程那些事:volatile解惑--转

    http://www.infoq.com/cn/articles/java-multi-thread-volatile/ 1. 前言 volatile关键字可能是Java开发人员“熟悉而又陌生”的一个 ...

  10. rem简单实现移动端适配

    rem:移动web开发 默认字体大小是16px 在<html>中设置字体大小 与em的区别: em是在父级设置字体大小受影响 移动端适配 首先获取屏幕的宽度 计算当前屏幕宽度和640的比例 ...