最新版的jquery.lazyload.js已不再是伪的延迟加载了

一、请按照基本使用方法说明设置

//载入JavaScript 文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
//img标签至少应包含以下4个属性,否则不能实现延迟加载的效果,如下:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
//使用
$(function() {
$("img.lazy").lazyload();
});

二、常用属性说明

threshold : 200   //设置灵敏度,表示进入显示区域还有200像素就开始加载
effect : "fadeIn" //使用淡入特效
failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档 container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性 event : "click" //修改触发事件为单击

三、参考

英文参考:http://www.appelsiini.net/projects/lazyload

中文参考:http://code.ciaoca.com/jquery/lazyload/

图片延迟加载插件jquery.lazyload.js的使用方法的更多相关文章

  1. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  2. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  3. jQuery图片延迟加载插件jQuery.lazyload使用方法(转)

    使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...

  4. jQuery图片延迟加载插件jQuery.lazyload 的使用

    使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...

  5. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  6. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  7. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

    引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

  8. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. jQuery懒加载插件 – jquery.lazyload.js简单调用

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. div border-radius画圆

    不要指定border-width属性: <html> <style type="text/css"> div{ border-style: solid; b ...

  2. java方法的重载

    java方法的重载 public class Person1 {    private String name; //姓名    private int age;      //年龄    priva ...

  3. SAP ABAP 程序调用FORM

    *&---------------------------------------------------------------------* *& Report ZHAIM_FOR ...

  4. java-常用快捷键

    alt+/:代码提示 ctrl+/:代码提示 ctrl+1:快速生成impl代码

  5. 《Pro Android Graphics》读书笔记之第四节

    Android Procedural Animation: : XML, Concepts and Optimization Procedural Animation Concepts: Tweens ...

  6. C# 动态创建出来的窗体间的通讯 delegate1

    附件 http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate01.rar 需要每个窗体是独立存在,禁止相与引用窗体 这样干净并且可以反 ...

  7. Chapter 5 - How to Detect the Collisions

    Chapter 5 - How to Detect the Collisions Our hero can fire bullets now, but the bullets are only vis ...

  8. android开发之gridlayout使用入门

    这个东东以前没怎么用过,今天研究了一下,不难,感觉只是在某些方面很好用. 记录下,做个计算器. <GridLayout xmlns:android="http://schemas.an ...

  9. RedHat7搭建MongoDB

    yum安装MongoDB 添加MongoDB源# vi /etc/yum.repos.d/mongodb-org-3.0.repo [mongodb-org-3.0] name=MongoDB Rep ...

  10. [GDI+] 生成缩略图的类文件SmallImage (转载)

    直接看代码吧,大家可以直接复制使用 /// <summary> /// 类说明:SmallImage类, /// 编码日期:2012-08-20 /// 编 码 人: 苏飞 /// 联系方 ...