zoukankan      html  css  js  c++  java
  • 页面图片懒加载、延迟加载(lazyload)

    文档:http://www.h-ui.net/lib/jQuery.lazyload.js.shtml

    github地址:https://github.com/jieyou/lazyload

    Lazy Load是一个用js编写的jQuery插件,用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载,没有滚动到的区域img标签上会有一个占位图片,而真实图片不会被载入。当页面比较长,图片比较多的时候,延迟加载图片可以加快页面加载速度,在某些情况下降低服务器负担。

    使用方法

    1、lazyload.js依赖jquery或者zepto.js。

      引入jquery文件和lazyload.js文件

      lazyload.js文件地址:http://lib.h-ui.net/lazyload/1.9.3/lazyload.js

    2、将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如:lazyload,方便js调用。

      

    <img class="lazyload" alt="" width="1000" height="60" data-original="//images.h-ui.net/www/AD-1000x60.gif" /> 

    js调用

    $(function() {
           $("img.lazyload").lazyload()}
       );
    

      

    相关参数

    属性默认值描述备注
    threshold 0 临界点 可以设置>0的数值,让图片距离屏幕一定像素时提前加载。
    failure_limit 0 当图像不连续时 滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布。特殊布局请设高参数。
    container window 触发可滚动的容器 默认是浏览器的滚动条,也就是window。可以自定义带滚动条的 DIV 元素。如:$("#container")
    event scroll 设置事件来触发加载 click、mouseover可自定义事件
    effect show 载入特效 fadeIn(淡入效果)
    skip_invisible true 加载隐藏的图片 默认忽略了隐藏图片,可以设置为false加载隐藏图片
    placeholder data:image/png;base64,iVBOR…… 默认的占位图片 可以直接把占位的图片路径赋给img的src
  • 相关阅读:
    RUST实践.md
    redis.md
    opencvrust.md
    aws rds can't connect to mysql server on 'xx'
    Foundation ActionScript 3.0 With Flash CS3 And Flex
    Foundation Flash Applications for Mobile Devices
    Flash Mobile Developing Android and iOS Applications
    Flash Game Development by Example
    Actionscript 3.0 迁移指南
    在SWT中非UI线程控制界面
  • 原文地址:https://www.cnblogs.com/pxblog/p/12585369.html
Copyright © 2011-2022 走看看