图片延迟加载 jquery.lazyload.js

最新推荐文章于 2021-01-07 15:54:19 发布
最新推荐文章于 2021-01-07 15:54:19 发布
阅读量776 收藏 1
点赞数
分类专栏： HTML5 JQuery插件 Javascript 文章标签： JQuery插件 lazyload 延时载入图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phpfer/article/details/49453407
版权
Javascript 同时被 3 个专栏收录
33 篇文章 1 订阅
订阅专栏
HTML5
18 篇文章 0 订阅
订阅专栏
JQuery插件
8 篇文章 0 订阅
订阅专栏

一、使用JQuery的lazyload.js插件实现

1. JS

- 载入JQuery

- 载入lazyLoad插件

- 配置js设置

<script type="text/javascript">
$(document).ready(function(){
	$("img.lazy").lazyload({
	placeholder : "img/default.gif",//点位图片
	threshold:200,		//设置threshold为200令图片在距离屏幕200像素时提前加载。
	effect:"fadeIn",	//淡入淡出效果(show/fadeIn/slideDown)
	//event : "click",	//事件触发时才加载.(click/mouseover/sporty/foobar)
	failurelimit:10000,	//图片排序混乱时,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
	});
});
</script>
2. HTML

- 设置CSS样式类 .lazy

- 图片地址不用src，设置为data-original='PIC URL',width和height必须。

<img class="lazy" data-original="http://bbs.home.news.cn/upfiles/0468B6AE.002C" width="765" height="574" alt="" />

Demo源码 

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>Jquery lazyload.jquery.js插件 载入图片延时</title>
</head>
<body>
	<div id="container" class="" align="center">
		<img class="lazy" data-original="http://d.hiphotos.baidu.com/image/pic/item/d8f9d72a6059252dff61080f329b033b5bb5b942.jpg" width="765" height="574" alt="demo img" /><br /><br />
		<img class="lazy" data-original="http://pic1.nipic.com/2009-02-20/2009220135032130_2.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://p4.gexing.com/shaitu/20120922/1520/505d66aac9e7b.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://img05.tooopen.com/images/20150314/tooopen_sy_82508172855.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://imgsrc.baidu.com/forum/pic/item/0ea6ba6eddc451da3189c429b6fd5266d116326c.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://imgsrc.baidu.com/forum/pic/item/e42b1dd8bc3eb135d193e747a61ea8d3fc1f4493.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://b.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d65ee407d7040828381e30fd50.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://b.hiphotos.baidu.com/image/pic/item/ac345982b2b7d0a265c13423c9ef76094b369a07.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://bbs.home.news.cn/upfiles/0468B6AE.002C" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://s15.sinaimg.cn/middle/5c69ce18hb6dda61ccf9e&690" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://img3.a0bi.com/upload/ttq/20150406/1428280201544.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://img.blog.163.com/photo/fsP38IK-lL1rl06v5xvL-Q==/282037926664740273.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://uploadfile.bizhizu.cn/2014/0721/20140721030354406.jpg" width="765" height="574" alt="" /><br /><br />
		<img class="lazy" data-original="http://tupian.qqjay.com/u/2013/0106/8_205849_11.jpg" width="765" height="574" alt="" /><br /><br />
	</div>
  
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("img.lazy").lazyload({
	placeholder : "img/default.gif",//点位图片
	threshold:200,		//设置threshold为200令图片在距离屏幕200像素时提前加载。
	effect:"fadeIn",	//淡入淡出效果(show/fadeIn/slideDown)
	//event : "click",	//事件触发时才加载.(click/mouseover/sporty/foobar)
	failurelimit:10000,	//图片排序混乱时,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
	});
});
</script>
</html>

offical website:http://plugins.jquery.com/lazyload/

Github:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

CN:http://www.w3cways.com/1765.html

二、非插件实现 需JQuery

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
 $(function(){
  var $winH = $(window).height();
  var $img = $("#show img");
  var $imgH = parseInt($img.height()/2);
  var $srcDef = "http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif";
  runing();
  $(window).scroll(function(){
   runing();
  })
  function runing(){
   $img.each(function(i){
    var $src = $img.eq(i).attr("original");
    var $scroTop = $img.eq(i).offset();
    if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
    {
     if($img.eq(i).attr("src") == $srcDef){
      $img.eq(i).hide();
     }
     $img.eq(i).attr("src",function(){return $src}).fadeIn(300);
    }
   })
  }
 })
</script>
<style type="text/css">
 *{ border:0;}
 a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}
</style>
</head>
<body>
 <div id="show">
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103315039.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103227099.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103241085.jpg" /></a>
        <a href="#"><img src="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103051018.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
    </div>
</body>
</html>
这个是转的，暂时找不到出处了。。。回头补

东成熙就
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
懒加载jquery.lazyload.js
沫沫酱
07-28 2913
首先引入jquery文件和懒加载文件 懒加载lazyload $(function() { $("img.lazy").lazyload({ effect : "fadeIn" }); }); 图片的标签需要添加data-original属性,并且添加一个针对懒加载的样式 class="lazy"
jquery.lazyload.js 图片懒加载 --demo
08-21
jquery.lazyload.js 图片懒加载 --demo
jQuery.lazyload.js
09-06
jQuery图片延迟加载插件jQuery.lazyload.js,使用延迟加载在可提高网页下载速度以及提高用户体验，也能帮助减轻服务器负载。
jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
weixin_30332241的博客
01-13 444
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基...
jquery.lazyload.js
06-13
使用jQuery.Lazyload的优点 提高页面加载速度。 网页图片挨个渐显，非常美观。
jquery 懒加载插件jquery.lazyload.js
carriehaohao的博客
03-04 1625
懒加载插件 jquery.lazyload.js 打开一个页面，有很多图片，不可能一次加载完毕，而是滚动到哪个位置再进行加载，这是用来做性能优化的。 1.导入JS插件(前提有 jquery.lazyload.js 文件) 2. 需要进行懒加载的图片上要添加选择器：lazy 然后添加方法：lazyload() $("img.lazy").lazyload()
lazyload.js详解
big_dot的博客
12-16 778
简介lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。优点： 它可以提高页面加载速度； 在某些情况清晰它也可以帮助减少服务器负载。 安装bower安装：$ bower install jqu
jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件
Leo_DLi的博客
01-07 1283
最近使用 jquery.lazyload.js 这个jQuery插件的时候, 突然发现对这个插件相对全面的介绍不多. 特别是对lazyload()方法中的配置选项的介绍少之又少. 随机整理一份供大家参阅. 废话不多少, 直接上代码: $("img.lazy").lazyload({ // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 placeholder : "img/lazy.gif", //用图片提前占位 // eff
jq lazyload.js
sinat_38992528的博客
05-07 339
转自： https://blog.csdn.net/ning109314/article/details/7042829和https://blog.csdn.net/yusirxiaer/article/details/79564372 目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。现在最流行使用的就是Laz...
jQuery图片延迟加载插件jquery.lazyload.js
weixin_30500105的博客
06-21 107
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 一、使用方法说明 //载入JavaScript文件 <script src="./jquery-3.1....
JQuery JQuery第三方插件(jquery.lazyload.js),懒加载(页面拉到下面才去加载图片)
houyanhua1的专栏
03-19 649
demo.html：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; div { hei
jQuery 插件 lazyload.js 的插件使用——实现图片的延迟加载
一碗周
11-07 426
古之立大事者，不惟有超世之才，亦必有坚忍不拔之志——苏轼 写在前面 lazyload.js 是一个基于 JQuery 的插件，可以用来缓冲加载图片。为什么要缓冲加载图片呢？ 如果一个网页很长并且有很多图片的话，下载图片就需要很多时间，那么就会影响整个网页的加载速度，而这款延迟加载插件，会通过你的滚动情况来加载你需要看的图片，然后它才会从后台请求下载图片，最后显示出来。通过这个插件，可以在需要显示图片的时候，才下载图片，从而可以减少服务器的压力，提高页面加载速度。 lazyload 插件的优点: 可以提.
前端性能优化成神之路--图片懒加载(lazyload image)
08-17 234
图片懒加载（当然不仅限于图片，还可以有视频，flash）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载所有的图片，从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法，就是你不想看就不给你看，我也懒得加载出来，懒得去请求。通俗的说就是你不要就不给你，怎么地。举个栗子，比如在进入某个页面的时候，它会有许多的图片，有些图片可能在下面，当我们...
jQuery懒加载插件jquery.lazyload.js使用说明实例
weixin_34195546的博客
12-03 183
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。 Lazy Load 是一个用 JavaScript 编写的 jQuery 插件。它可以延迟加载长页面中的图片在浏览器...
jQuery之jquery.lazyload.js插件用法
qq_38163146的博客
08-25 339
网站中如果图片过多，就会因为加载图片而等待很长时间，此时我们就用到图片延时加载插件jquery.lazyload.js，这个插件可以让我们在向下滚动的时候加载图片。让网页首屏尽可能快的加载进来。 如何使用jquery.lazyload.js： 1、jquery.lazyload.js依赖于 jquery. 请将下列代码加入HTML的结尾，也就是</body>前: <scri...
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
weixin_33695450的博客
12-11 266
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件。它可以延迟加载长页面中的图片，在浏览器可视区域外的图片不会被载入。直到用户将页面滚动到它们所在的位置，这与图片预加载的处理方式正好是相反的。在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，浏览器将会在加载可见图片之后...
jquery.lazyload插件实现图片延迟加载
最新发布
05-25
jquery.lazyload是一款jQuery插件，可以实现图片的延迟加载。当页面加载时，只会加载可视区域内的图片，当页面滚动时，再加载其他的图片，这样可以提高网页的加载速度和用户体验。 使用jquery.lazyload插件，需要先引入jQuery库和jquery.lazyload插件的js文件。然后在页面中需要延迟加载的图片上添加class="lazy"和data-original属性，data-original属性存储了真实的图片地址。 接着在js中编写代码： ``` $(function() { $("img.lazy").lazyload(); }); ``` 这样就完成了延迟加载的设置。如果想要设置一些参数，可以传入一个对象作为参数，如下所示： ``` $(function() { $("img.lazy").lazyload({ effect : "fadeIn", // 图片淡入效果 threshold : 200, // 提前加载像素 failure_limit : 10, // 加载失败重试次数 event : "click", // 事件触发加载 container: $("#container") //容器对象 }); }); ``` 这样就可以根据自己的需求进行设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值