jquery.lazyload.js-v1.9.1延时加载插件,已兼容ie6和各大浏览器

来源:http://www.jq22.com/jquery-info390

使用前要求:

img的设置:

1、class要配上“lazy”;

2、用data-original代替src;

3、如果想要占位的话,img别忘了写上宽高。

<!DOCTYPE html>
<html>
<head>
<title>jQuery图片延迟加载插件jQuery.lazyload | jQuery插件库</title>
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
<script src="http://demo.jq22.com/tuupola-jquery_lazyload/jquery.lazyload.js?v=1.9.1" type="text/javascript"></script>
</head>
<body>
<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" data-original="http://demo.jq22.com/tuupola-jquery_lazyload/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>
</body>
</html>

时间: 2024-08-06 11:57:14

jquery.lazyload.js-v1.9.1延时加载插件,已兼容ie6和各大浏览器的相关文章

jquery实现的图片延时加载插件

jquery实现的图片延时加载插件: 在很多网站尤其是图片站,都采用了图片延时加载效果,这样可以有效的减轻服务器的压力,有点自然不言而喻了,下面就和大家分享一个图片延时加载的插件,希望能够给大家带来一定的帮助. 代码如下: <script type="text/javascript"> (function( $ ){ $.fn.imglazyload=function( options ) { var o=$.extend({ attr:'lazy-src', contai

js效果笔记:怎样实现图片的懒加载以及jquery.lazyload.js的使用

在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件. 一:jquery.lazyload.js插件 lazyload是jQuery写的延迟加载插件,在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 实现原理 首

js 的延时加载

最近,由于项目中引用到的脚本比较多,页面首次加载速度有些慢,于是进行了一些优化 用到的是延时加载技术,大概思路就是减少页面的<script>标签,并依靠lazyload.js延时加载相应的脚本文件. 首先,要先引用lazyload.js ,这是一个老外写的脚本,我放到了公司的图片服务器上,大家可以直接访问  http://img.fang.com/rent/image/rent/js/lazyload.js 实践之前,先来看一下它的使用文档 // Load a single JavaScrip

【转】Selenium2(WebDriver)总结(一)---启动浏览器、设置profile&amp;加载插件

基本读踩过的坑,泪流满面··· 本文主要记录下在使用selenium2/webdriver时启动各种浏览器的方法.以及如何加载插件.定制浏览器信息(设置profile)等 环境搭建可参考我的另一篇文章:http://www.cnblogs.com/puresoul/p/3483055.html 一.Driver下载地址: http://docs.seleniumhq.org/download/ 二.启动firefox浏览器(不需要下载驱动,原生支持) 1.firefox安装在默认路径下: 1 /

Selenium2(WebDriver)总结(一)---启动浏览器、设置profile&amp;加载插件

本文主要记录下在使用selenium2/webdriver时启动各种浏览器的方法.以及如何加载插件.定制浏览器信息(设置profile)等 环境搭建可参考我的另一篇文章:http://www.cnblogs.com/puresoul/p/3483055.html 一.Driver下载地址: http://docs.seleniumhq.org/download/ 二.启动firefox浏览器(不需要下载驱动,原生支持) 1.firefox安装在默认路径下: 1 //启动默认安装路径下的ff 2

jquery插件之lazyload图片延时加载功能

公司投票程序,页面图片较多,导致页面显示很慢,做的图片延时加载: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>demo</title> </

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

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动 页

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

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 如何使用: Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是</body>前: <

jquery.lazyload.js实现图片懒加载

个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片,然后将图片的实际地址写在alt属性里,当鼠标往下滑动的时候得到当前显示区域内的img的lz-src,动态的就将各自的lz-src属性的值赋值给src属性,这样就实现了图片延迟加载,减轻服务器端的压力,节省本地带宽,提升了访问网页的速度 插件源码地址: https://raw.github.com/