zoukankan      html  css  js  c++  java
  • jquery-懒加载技术(简称lazyload)

    第一:lazyLoad简介及作用:

    网站性能优化的插件,提高用户体验。

    页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载。

    第二:使用场合

     涉及到图片,falsh资源,iframe,网页编辑器(CK),JS文件 等占用较大带宽,避免网页打开时加载过多资源,让用户等待太久。

    第三:代码使用

    1.导入JS插件(前提有 1.6.2.js文件)

    <script src="jsjquery.lazyload.js" type="text/javascript"></script> 

    2.在你的页面中加入如下:

    <script type="text/javascript"> 
        $("img").lazyload();  
    </script> 

    所以图片都延迟加载。

    3.设置敏感度区域

    插件提供了 threshold 选项

    $("#xd").lazyload({ threshold : 200 })

    将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

    参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

    4. 还有涉及到 高级应用,触发事件,多参数等等。详细见参考 url

    参考:

    加载 图片 :http://www.cnblogs.com/szytwo/archive/2012/12/27/2836141.html

    加载 js 文件:

    5.使用jQuery.Lazyload延迟加载图片后 在img标签会多加一条属性data-original="图片地址"(data-original可以自定义)我的问题是成功加载图片后,如何自动移除这条自定义的属性。

    ------解决方案--------------------
    可以修改lazyload插件,在加载完毕每张图片执行还原原图片后移除data-original属性

    JScript code
    $(this).removeAttr('data-original');
  • 相关阅读:
    Intel汇编程序设计-整数算术指令(上)
    Intel汇编程序设计-整数算术指令(上)
    Windows核心编程 第四章 进程(下)
    Windows核心编程 第四章 进程(下)
    Windows核心编程 第四章 进程(中)
    Windows核心编程 第四章 进程(中)
    PAT L2-017 人以群分
    PAT 1087 有多少不同的值
    PAT 1086 就不告诉你
    PAT 1020 月饼
  • 原文地址:https://www.cnblogs.com/yzadd/p/6494579.html
Copyright © 2011-2022 走看看