• 图片延迟加载效果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"
    });

  • 相关阅读:
    Cake
    抽屉评论数据库设计
    学习网站
    栈和堆简介
    链表相关操作
    链表操作
    Django form验证二
    django ajax提交form表单数据
    jquery中 after append appendTo 的区别
    Python json.dumps 自定义序列化操作
  • 原文地址:https://www.cnblogs.com/lch880/p/1692597.html
Copyright © 2020-2023  润新知