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>
jquery.lazyload.js-v1.9.1延时加载插件，已兼容ie6和各大浏览器的更多相关文章
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- jquery和js的几种页面加载函数的方法以及执行顺序
参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html https://www.cnblogs.com/james641/p/783837 ...
- jquery.datatable.js与CI整合 异步加载（大数据量处理）
http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...
- jquery easyui使用（三）······datagrid加载数据(已解决)
<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- jQuery之jquery.lazyload.js插件用法
研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- Selenium2(WebDriver)总结(一)---启动浏览器、设置profile&加载插件
本文主要记录下在使用selenium2/webdriver时启动各种浏览器的方法.以及如何加载插件.定制浏览器信息(设置profile)等 环境搭建可参考我的另一篇文章:http://www.cnbl ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- [原创]Python免杀ShellCode加载器(Cobaltstrike/Metasploit)
0x001 原理 采用分离法,即将ShellCode和加载器分离.方法较LOW但免杀. 本文主要将ShellCode转成HEX,再通过加载器执行ShellCode. PS: 何为SC加载器,即专门用于 ...
- Faiss的学习和入门文章
可以看这里的文章: https://www.leiphone.com/news/201703/84gDbSOgJcxiC3DW.html https://waltyou.github.io/Faiss ...
- netty心跳机制解决
直接看别个的源码:https://blog.csdn.net/xt8469/article/details/84827443>>https://blog.csdn.net/xt8469/a ...
- Github Markdown 图片如何并排显示
Github Markdown 图片如何并排显示 要一张图片接着一张图片的写,中间不能有换行.如果换行的话则图片也换行 正确的写法: 
逻辑体系结构与Data file 逻辑体系结构关系图 逻辑体系结构最小单位BLOCK的研究 block能装多少行数据: drop table test_block_num purge; create ...
- 华为 S5700 交换机 批量修改端口方法
常常在配置交换机端口的时候需要将多个端口设置为相同的配置,当时各端口逐一去配置不仅慢,而且容易出错,这个时候就需要对端口进行批量设置,不仅快捷,而且避免了反复输出容易出错的情况.不同系列.不同版本交换 ...
- ubuntu开发常用收集
命令: 1.http://blog.csdn.net/simongeek/article/details/45271089 2.http://www.jianshu.com/p/654be9c0f13 ...
- WebAPI中路由参数中包含字符-点“.”
请求url都是类似:/api/area/province.list 我们默认建立的Asp Net WebApi 服务时,如果请求url包含“.”,则返回404错误. 解决办法:需要在web.confi ...
- Big Data Hubris："大数据傲慢"问题
大数据的傲慢与偏见— 读后心得 数据模型研究者必看的书 原文链接: https://medium.com/@iven00000000/%E5%A4%A7%E6%95%B8%E6%93%9A%E7%9A ...
- SSM之Mybatis整合及使用
SSM 在ss基础上加进行整合Mybatis(applicationContext.xml中添加配置),并添加分页拦截器(添加mybatis分页拦截器),并用generator动态生成到层. 构建基础 ...