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

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

方法:

引入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. Bloglines订阅Blog部落格RSS网摘 - Blog透视镜

    网络信息蓬勃发展,Blog部落格越来越普及,如果逐一地去浏览网站,势必费时费力,倘若信息可以自己送上门,那就可以节省不少时间,就好像看报纸的标题,有兴趣才点连结,进到网站浏览文章内容,Blogline ...

  2. (转)Linux监控工具

    需要监控Linux服务器系统性能吗?尝试下面这些系统内置或附件的工具吧. 大多数Linux发行版本都装备了大量的监控工具,这些工具提供了能用作取得相关信息和系统活动的量度指标. 你能使用这些工具发现造 ...

  3. 拍照-----------android系统 至关重要的功能

    一 在Android 中,拍照对应的Action 是android.provider.MediaStore.ACTION_IMAGE_CAPTURE. 用于拍照的Activity 需要返回照片图像数据 ...

  4. ural 1586. Threeprime Numbers

    这道题看着别人的代码写的. #include <cstdio> #include <cstring> #define m 1000000009 using namespace ...

  5. js深入研究之无法理解的js类代码,extend扩展

    <script type="text/javascript"> function Person(name) { this.name = name; } Person.p ...

  6. cf443A Anton and Letters

    A. Anton and Letters time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  7. usaco6.1-Cow XOR:trie树

    Cow XOR Adrian Vladu -- 2005 Farmer John is stuck with another problem while feeding his cows. All o ...

  8. ZOJ2317-Nice Patterns Strike Back:矩阵快速幂,高精度

    Nice Patterns Strike Back Time Limit: 20000/10000MS (Java/Others)Memory Limit: 128000/64000KB (Java/ ...

  9. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  10. BoneCP学习笔记

    什么是BoneCP BoneCP 是一个快速.免费而且开源的java数据库连接池(JDBC Pool)管理工具库.如果你曾经使用过C3P0或者DBCP,那你肯定知道上面这句话的意思:如果你没用过这些, ...