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

    在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量。

    使用图片延时加载插件就解决这些问题。

    方法:

    引入jquery和插件文件

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

    图片代码设置

    <img class="lazy" src="未加载前的图片地址" original="要显示的图片地址">

    js调用

    $("img.lazy").lazyload();

    Lazyload属性:

    threshold:值为number,图片离屏幕多少像素时开始提前加载;

    event:值为String,使图片显示的事件,支持jQuery的所有事件,也可以是自定义事件。如:设置event为click,则需要点击占位符图片才能让图片显示;

    effect值为String,图片显示的效果,默认值为show。支持jQuery的fadeIn, slideDown;

    container:值为String,使某容器内的使用延迟加载,容器内需要有滚动条;

    $("img.lazy").lazyload({
        threshhold:100,
        effect:"fadeIn"
    });
  • 相关阅读:
    tcp的三次握手和四次挥手
    前端文档规范
    阻止事件冒泡
    研发纠纷解决方案
    ui-router 中views的配置
    JXL操作Excel部分详解(java)
    utf-8与utf-16的区别
    把字符串转换为Double 类型
    spring MVC
    Android项目目录结构
  • 原文地址:https://www.cnblogs.com/xiashuo-he/p/3818921.html
Copyright © 2011-2022 走看看