lazyload 这个 jQuery 插件，是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话，下载图片就需要很多时间。而这款插件，会检测你的滚动情况，只有你要看到那个图片的时 候，它才会从后台请求下载图片，然后显示出来。使用这个插件，可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载。 如果一个人不看下面的图片，那加载下面的图片就是一种浪费。

而Lazy Load 插件原理：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。

<img data-original=“img/example.jpg” src=“img/grey.gif”>

　　具体效果：延迟加载图片

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

  1. 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

    在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...

  2. 延迟加载图片的 jQuery 插件：Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  3. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

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

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过 ...

  6. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

  7. 延迟加载图片插件LazyLoad.js的使用方法

    我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...

  8. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  9. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

随机推荐

  1. Observer Pattern

    Motivation We can not talk about Object Oriented Programming without considering the state of the ob ...

  2. 【hadoop2.6.0】用C++ 编写mapreduce

    hadoop通过hadoop streaming 来实现用非Java语言写的mapreduce代码. 对于一个一点Java都不会的我来说,这真是个天大的好消息. 官网上hadoop streaming ...

  3. POJ 2407 Relatives(欧拉函数)

    题目链接 题意 : 求小于等于n中与n互质的数的个数. 思路 : 看数学的时候有一部分是将欧拉函数的,虽然我没怎么看懂,但是模板我记得了,所以直接套了一下模板. 这里是欧拉函数的简介. #includ ...

  4. POJ2485Highways

    http://poj.org/problem?id=2485 题意 : 这道题和1258很像,但是这道题求的是最小生成树中最大的那条边,所以在函数里处理一下就行了. 思路 : 赤裸裸的最小生成树啊,但 ...

  5. hdu 1709 The Balance

    母函数的特殊情况,左右两边都可以放,如样例1,2,9 母函数为(1+x+1/x)*(1+x^2+1/x^2)*(1+x^9+1/x^9) 化简为(1+x+x^2)*(1+x^2+x^4)*(1+x^9 ...

  6. Oracle 9 - 分析undo和snapshot too old错误

    什么操作会生成undo INSERT生成的UNDO最少,只要记录新的rowid UPDATE生成的undo多一点,它要记录修改前的数据中的那部分. DELETE生成最多的undo, 因为它要记录整行被 ...

  7. hdu1068 Girls and Boys

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1068 二分图的最大独立集数=节点数(n)— 最大匹配数(m) 另外需要注意的是: 本题求出的最大匹配数是实 ...

  8. 【Linux高频命令专题(15)】more

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  9. ibatis框架的sqlmapclient接口

    SqlMapClient,是iBatis中的重要接口,这个接口涉及到对SQL映射的执行和批处理. 现在,就先了解它的对query开头方法的定义. 首先是 queryForList 方法: //指定SQ ...

  10. Web 技术人员需知的Web 缓存知识

    最近的译文距今已有4年之久,原文有一定的更新.今天踩着前辈们的肩膀,再次把这篇文章翻译整理下.一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~ ...