zoukankan      html  css  js  c++  java
  • 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 

  • 相关阅读:
    RN8209校正软件开发心得(1)
    Chrome 31版本导出Excel问题
    ComBox选择
    网页设计的一般步骤
    .NET一套开发工具
    关于用sql语句实现一串数字位数不足在左侧补0的技巧
    python jieba模块详解
    python内置函数详细描述与实例演示
    Markdown的基本语法记录
    python configparser模块详解
  • 原文地址:https://www.cnblogs.com/xietong/p/10447140.html
Copyright © 2011-2022 走看看