-----------------------------------------------------------------------------------------------

class='lazy' 载入样式,data-original指向图片地址

底部引入jQuery和jQuery.lazyload.js

<img class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> <script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script> <script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script>

底部调用lazyload()方法进行初始化,设置显示方法,当然还可以设置更多参数。

-------------------------------------------------------------------------------------------------

LazyLoad官方下载地址:http://www.appelsiini.net/projects/lazyload

jQuery插件库网站推荐:http://www.jq22.com

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

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

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

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

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

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

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

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

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

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

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

  6. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

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

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

  8. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  9. 图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 //载入JavaScript 文件 <script src="jquery.js&q ...

随机推荐

  1. Calling async method synchronously

    https://stackoverflow.com/questions/22628087/calling-async-method-synchronously/22629216#22629216 ht ...

  2. MAC 无脑编译OpenCV

    1:准备好OpenCV 源码包 下载地址:https://opencv.org/releases.html 编译教程:https://blog.csdn.net/computerme/article/ ...

  3. Django中的路由系统:urls

    Django的路由系统 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是以这种方式告诉Django,对于这个URL调用 ...

  4. ECharts学习记录

    一.ECharts在GitHub的地址以及需要引入文件地址: 1.Github地址:https://github.com/ecomfe/echarts 2.官网下载文件地址:http://echart ...

  5. js保留两位小数点

    var temp = 2.222222222; temp.toFixed(2); //得出结果2.22

  6. 【接口测试】【SOAP】简单的接口测试学习

    ==================================================================================================== ...

  7. fabric镜像安装脚本分析

    #!/bin/bash # # Copyright IBM Corp. All Rights Reserved. # # SPDX-License-Identifier: Apache-2.0 # e ...

  8. IDEA 快捷操作 Windows

    1.查找Action  ctrl+shift+A :可通过其查询其他操作快捷键等. 2.项目之间跳转:ctrl+shift+[ 与  ctrl+shift+] 3.alt + 数字 展开对应窗口 4. ...

  9. 1.HTML+CSS写个8

    感想: 有点缺陷.效果地址:https://codepen.io/flyingliao/pen/QobdyE HTML code: <div class="eight"> ...

  10. js分钟数转天-时-分

    //js格式化分钟转为天.时.分 function formatMinutes(minutes) { )); ? Math.floor((minutes - day * ) / ) : Math.fl ...