当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的

使用方法也非常简单。

1、在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定):

<script src="js/jquery.min.js"></script>

<script src="js/jquery.lazyload.min"></script>

<script type="text/javascript" charset="utf-8">   $(function() {      $("img.lazy").lazyload();   }); </script>

  2、图片的html代码<img>标签需要这样写:

<img class="lazy" src="img/jiazai.jpg" data-original="img/1.jpg" width="540" height="960" alt="">

说明:

<img>里加上class="lazy" 是为了更好的控制哪些图片延迟加载

<img>里的src为一张预加载的图片,一般选择小的动态加载效果图片

<img>里的data-original为真正需要显示的图片地址。

<img>里的alt为图片说明文字,在图片还没加载时显示。这个可有可无。

Lazy Load插件其他功能:

  参加官网:http://www.appelsiini.net/projects/lazyload

jquery.lazyload.js 图片延迟加载的更多相关文章

  1. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  2. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  3. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  4. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  5. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  6. 使用jQuery lazyload 实现图片延迟加载

    下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 <div id="imagesCon ...

  7. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  8. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

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

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

随机推荐

  1. Web.xml中自动扫描Spring的配置文件及resource时classpath*:与classpath:的区别

    Web.xml中自动扫描Spring的配置文件及resource时classpath*:与classpath:的区别 一.Web.xml中自动扫描Spring的配置文件(applicationCont ...

  2. mysql命令行创建数据库

    create database publiccms; grant all privileges on publiccms.* to root@localhost identified by 'publ ...

  3. chrome 获得点击按钮时的事件

    初次了解浏览器高级点的功能,原来这么强 想了解点击一个网页的按钮时触发了什么事件,firefox chrome确实很强大,基本可以监控所有内容 以chrome为例: 在按钮上 右键检查 或者 F12  ...

  4. 照着官网来安装openstack pike之environment设置

    安装openstack前的准备环境: 两个centos7系统的环境:192.168.101.10 node1,192.168.101.11 node2 控制节点node1,计算节点node2 1.统一 ...

  5. 20145310《Java程序设计》第2次实验报告

    20145310<Java程序设计>第2次实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计 ...

  6. 20145312 《Java程序设计》第2周学习总结

    20145312 <Java程序设计>第2周学习总结 教材学习内容总结 1.1类型.变量与运算符 1.1.1类型 1.基本类型 整数:short(2字节).long(8字节).int(4字 ...

  7. shall的过去式和should怎么区分

    shall的过去式是should,但是怎么和情态动词的should区分啊,答得好我会提高悬赏!!! shall 将来时,用于第一人称:I shall be back in a minute.用来表示征 ...

  8. 【前端】vue.js实现按钮的动态绑定

    vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定< ...

  9. POJ_2182 Lost Cows(线段树的简单应用)

    基本思路就是,从后往前读取数字small[i].在剩余编号集合里(一开始剩余编号集合为全集)查找第small[i]+1个编号,该编号就是对应位置牛的编号. 若直接用数组来做,则每次查找都需要遍历前n个 ...

  10. RedHat7.4最小化安装yum源不可用问题解决

    本次安装的RedHat7.4是安装在Oracle VM VirtualBox5.2.8虚拟机上面的,本文不对安装虚拟机步骤做详细说明. 工具准备: Oracle VM VirtualBox5.2.8 ...