zoukankan      html  css  js  c++  java
  • 图片延迟加载效果lazyload插件

    最近发现lazyload插件在网上特火,好多大网站都用到了这技术,就是网页加载当前可视的范围内的图片,不可视的页面的图片暂时是不会被加载的,随着鼠标的滑动往下的图片也一点点被加载。它减轻了服务器的加载负担,提高了网页加载速度。

    1、要想实现着效果,首先得载入jquery.js和lazyload.js插件,在页面js里得加上“$("img").lazyload();这表示此页面上所有的图片都被延迟加载。

    2、可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).即如果将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片.

    3、可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1×1 象素的图片已经包含在插件里面.

    $("img").lazyload({ placeholder : "img/grey.gif" });

    3、图片完全加载的时候, 插件默认地使用show()方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果.

    $("img").lazyload({

           threshold : 200,    
       placeholder : "img/grey.gif",
       effect : "fadeIn"
    });

  • 相关阅读:
    第一类第二类丢失更新
    收藏文章
    Oracle常见授权与回收权限——grant和revoke
    web.xml组件加载顺序
    Java的native方法
    serialVersionUID作用
    Css选择器和JQuery基本编程接口
    使用Spring IoC进行Bean装配
    关于C/C++的一些思考(5)
    关于C/C++的一些思考(4)
  • 原文地址:https://www.cnblogs.com/lch880/p/1692597.html
Copyright © 2011-2022 走看看