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

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

方法:

引入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"
});

jQuery图片延迟加载插件的更多相关文章

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

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

  2. 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的

    不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...

  3. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

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

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

  5. jQuery图片延迟加载插件:jquery.lazyload

    ----------------------------------------------------------------------------------------------- clas ...

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

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

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

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

  8. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  9. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

随机推荐

  1. TVS_压敏电阻等保护类器件的布局问题

    世上本没有垃圾,垃圾都是放错了位置的资源. 对于电路来说,保护器件就是其保护作用的关键资源,但如果放错了位置,它就是垃圾:甚至不仅是垃圾,而还可能成为祸害. 由最近承接的几起电路原理图审核项目来看,触 ...

  2. ASM-51 宏汇编使用手册

    A51与ASM51基本相同   ASM-51 宏汇编主要用来开发Inter8051系列单片机,它具有宏处理,数据处理,列表处理和条件处理等多种功能.源程序的编写完全采用 Inter标准助记符和行格式. ...

  3. KEIL中的变量相关

    例:sfr P0=0x80表示P0口地址为80H:(sfr是字节操作) sfr16 T2=0xCC表示T2口地址的低地址为TL2=0XCC,高地址为TH2=0XCD(sfr16是字操作) 头文件reg ...

  4. 为什么新建的管理员账号权限没有Administrator大?

    Administrator是超级管理员,UAC不用确认,跟关了一样. 新建隶属于administrator组的用户,可以关掉UAC. 控制面板>系统和安全>操作中心>更改用户帐户控制 ...

  5. 泛型 Field 和 SetField 方法 (LINQ to DataSet)

    LINQ to DataSet 为 DataRow 类提供用于访问列值的扩展方法:Field 方法和 SetField 方法.这些方法使开发人员能够更轻松地访问列值,特别是 null 值.DataSe ...

  6. vmplayer中的fedora20无法进入图形界面

    新装了台fedora20的虚拟机,安装升级了一些东西后.启动时过了fedora的logo画面后就是黑屏. 也没提示不论什么错误,好在shell还能进去.查看/var/log/anaconda/sysl ...

  7. 改进的newlisp编译脚本,只需要配置

    前面有一篇Say bye to CMake and Makefile我开始用自己编写的newlisp脚本替代CMake,今天对前面的进行改进. 改进部分是: 1. newlisp armory模块的引 ...

  8. Sonar入门(四):Eclipse集成Sonar

    sonar及其插件在项目中的使用方法 Sonar平台 Sonar平台的安装见一文, 在Sonar平台上进行的检查可以通过hudson进行触发, A. 没有做持续集成的项目可以复制以下hudson上的任 ...

  9. [RxJS] Updating Data with Scan

    You often need to update the data flowing through the stream with custom logic based on what you nee ...

  10. Swift 2.0 封装图片折叠效果

    文/猫爪(简书作者)原文链接:http://www.jianshu.com/p/688c491580e3著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 用Swift封装图片折叠效果 b ...