❶ jquery.lazyload有什么用
懒加载，用于图片显示，在浏览器显示区域中的图片会加载，
下方需要滚动栏滚动才能看到的图片，先不加载，等到向下滚动时，才加载显示，
这样会提高用户体验度，先加载先显示的图片
❷ 如何把网站图片优化与快速加载做到极致
网站图片优化的重要性
网站图片的使用在提升用户阅读体验和网站整体的视觉设计效果都是有非常大的提升和帮助，以至于在网页设计上面几乎每一个文章链接都会调用文章缩略图，从而也就存在一个潜在且影响用户体验的问题。
网页中加载的图片越多，对于网站主和访客用户来说，都是对服务器和本地网络资源的极大浪费，同时也拉低了网站的打开速度，及时视觉效果方面提升了，但性子急的用户可以早就选择离开而看不到了。
图片懒加载的必要性
网站图片优化的重要性就体现在了网站整体的加载速度，虽然我们可以通过CDN加速或者提升服务器带宽，这无疑是增加了网站运营成本，而同样会浪费用户的带宽或流量，虽然可能用户并不能察觉到，但是既然是子凡这个追求极致的人来说，这点是绝对不能容忍的。
所以图片懒加载的必要性就体现出来了，懒加载的方式就是把用户能看到的页面中的图片第一时间渲染并加载，那么非首屏外的图片，当用户翻页或者滚动到可是区域时在实时的加载，可以说是真正的做到了按需加载吧，这样从本质上来减少图片对服务器带宽的压力，以及对用户的最佳考虑，更是提升网站首屏打开速度的一个好方法。
如何将网站图片优化做到极致？
对于网站图片优化的重要性已经不言而喻，而图片懒加载的重要性也就更不用多说，针对与网站图片的优化，我们在如何利用懒加载的方式来做到页面的最佳化呢？
01、首先我们需要知道整个网站或者一个页面中在哪些板块会出现图片，因为各个网站的不同，子凡这里就以一种最通用的页面来举例：
02、其中首页一般顶部第一个是LOGO图片，这个应该是没有必要做懒加载的，因为LOGO肯定是会在首屏显示和第一时间加载的；
03、然后可能就是幻灯效果或者是大图的展现效果，如果图片是在首屏的话做懒加载就没有必要了，可以选择直接引入或者css内链样式以背景的方式引入图片；
04、接着就是左侧的文章列表以及右侧的推荐文章等相关的内容和缩略图，这些地方的图片就是做懒加载的必要地方；
❸ jquery.lazyload 背景图可以懒加载吗
就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 思路：
将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
❹ javascript图片预加载和延时加载的区别
javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上，都是为了提升用户体验的,延时加载又叫懒加载。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
实现方式： 可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
懒加载：主要目的是作为服务器前端的优化，减少请求数或延迟请求数，一些图片非常多的网站中非常有用，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多 图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。，实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.jQuery插件中也有插件来实现该功能。
4.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
预加载核心代码参考：
document.getElementById("preload-01").style.background = "url(http://expsoft.com/image-01.png) no-repeat -9999px -9999px";
img1 = new Image();img1.src = "http://expsoft.com/path/to/image-001.gif";
if (img1.complete) { ready.call(img); load && load.call(img);
callback.call(img1,img1.width, img1.height);
return; }// 直接返回，不用再处理onload事件
img1.onload = function(){ callback.call(img1,img1.width, img1.height); };
懒加载核心代码参考：
.lazy {
display: none;
}
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.
$("img.lazy").show().lazyload();
设置敏感度，默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置 threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$("img.lazy").lazyload({ threshold : 200 });
❺ MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
在项目开发中遇到这样的功能，要求实现列表页动态加载功能，在实现过程中遇到一些小小插曲，下面小编给大家详细说明下解决方法：
首次加载时图片可以获取成功，再次加载失败，通过chrome调试发现img
的
data-lazyload
属性没改变
调试的时候发现了bug
$.fn.imageLazyload
=
function(options)
{
var
lazyloadApis
=
[];
this.each(function()
{
var
self
=
this;
var
lazyloadApi
=
null;
if
(self
===
document
||
self
===
window)
{
self
=
document.body;
}
//对，bug就在这，判定时如果body已有该属性，就不在加载了，整体的代码没看明白，注释太少了啊
var
id
=
self.getAttribute('data-imageLazyload');
if
(!id)
{
id
=
++$.uuid;
$.data[id]
=
lazyloadApi
=
new
ImageLazyload(self,
options);
self.setAttribute('data-imageLazyload',
id);
}
else
{
lazyloadApi
=
$.data[id];
}
lazyloadApis.push(lazyloadApi);
});
return
lazyloadApis.length
===
1
?
lazyloadApis[0]
:
lazyloadApis;
}
问题找到了，那么就在再次加载数据时，清除该属性就ok了
document.body.removeAttribute('data-imagelazyload');
mui(document).imageLazyload({
placeholder:
'../../images/img_head3.png'
});
以上所述是小编给大家介绍的MUI
解决动态列表页图片懒加载再次加载不成功的bug问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
❻ 为什么懒加载首屏右上角图不出来滚动一下才出来
懒加载是网站性能优化的插件，可以提高用户体验。
页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。
1、引入jquery
<script type="text/javascript" src="" ></script>
2、引入jquery懒加载插件
<script type="text/javascript" src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js"
></script>
3、在需要懒加载的图片上添加如下：
<img class='lazy' src='../images/i.png' data-original='" + obj.picurl + "' width='600' height='300' >";
src显示默认的图片
data-original为要显示的图片
4、启动懒加载
$("img.lazy").lazyload();
一般放在ajax complete中加载
如下代码：
[javascript] view plain print?
$.ajax({
type: 'POST',
url: NET.getBisList,
dataType: 'json',
async: true,
data: {
'city': city,
'districtid': districtid,
'cont': cont,
'page': page,
'lon': lon,
'lat': lat,
'keywords': keywords,
'distance': distance
},
success: function(data) {
if (data.state == 0000) {
var str = "";
for (var i = 0; i < data.msg.length; i++) {
var obj = data.msg[i];
str += "<li class='shop_det' onclick='openBusinessDet(" + obj.id + ")'>";
str += " <div>";
str += " <div class='shop_prof'>";
str += " <input type='hidden' name='id' id='B_id' value='" + obj.id + "'/>";
str += " <img class='lazy' src='../images/maititi.png' data-original='" + obj.picurl + "' width='600' height='300' onerror='loadImgError(" + obj.id + ")' id='img" + obj.id + "'>";
str += " </div>";
str += " <div class='info_det'>";
str += " <span class='name_det'>" + obj.bisname + "</span>";
str += " <span class='location'>距您" + (obj.distance / 1000).toFixed(1) + "km</span>";
str += " <span class='add_det'>" + obj.address + "</span>";
str += " </div>";
str += " </div>";
str += "</li>";
}
$('#showshops').append(str);
$("#loadMore").html("点击加载更多");
} else {
//没有数据
$("#loadMore").html(data.msg);
$("#loadMore").unbind("click"); //移除click
}
},
complete: function() {
$("img.lazy").lazyload();
},
error: function(xhr, type) {
}
});
❼ 很多网站滚动条向下的时候加载图片是怎么做到的
那个功能叫：延时加载。
网上有很多JS可以利用和实现的，你可以找一下
❽ 网页是如何做到图片文件没有下载完成便可显示图片
这叫”懒加载”或者“按需加载“，是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用
❾ 什么时候用懒加载
1.懒加载基本
懒加载——也称为延迟加载，即在需要的时候才加载（效率低，占用内存小）。所谓懒加载，写的是其get方法.
注意：如果是懒加载的话则一定要注意先判断是否已经有了，如果没有那么再去进行实例化
2.使用懒加载的好处：
（1）不必将创建对象的代码全部写在viewDidLoad方法中，代码的可读性更强
（2）每个控件的getter方法中分别负责各自的实例化处理，代码彼此之间的独立性强，松耦合
3.代码示例
1 //
2 // YYViewController.m
3 // 03-图片浏览器初步
4 //
5 // Created by apple on 14-5-21.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10
11 #define POTOIMGW 200
12 #define POTOIMGH 300
13 #define POTOIMGX 60
14 #define POTOIMGY 50
15
16 @interface YYViewController ()
17
18 @property(nonatomic,strong)UILabel *firstlab;
19 @property(nonatomic,strong)UILabel *lastlab;
20 @property(nonatomic,strong)UIImageView *icon;
21 @property(nonatomic,strong)UIButton *leftbtn;
22 @property(nonatomic,strong)UIButton *rightbtn;
23 @property(nonatomic,strong)NSArray *array;
24 @property(nonatomic ,assign)int i;
25 -(void)change;
26 @end
27
28
29
30 @implementation YYViewController
31
32 - (void)viewDidLoad
33 {
34 [super viewDidLoad];
35 [self change];
36 }
37
38 -(void)change
39 {
40 [self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];
41 //先get再set
42
43 self.icon.image=[UIImage imageNamed:self.array[self.i][@"name"]];
44 self.lastlab.text=self.array[self.i][@"desc"];
45
46 self.leftbtn.enabled=(self.i!=0);
47 self.rightbtn.enabled=(self.i!=4);
48 }
49
50 //延迟加载
51 /**1.图片的序号标签*/
52 -(UILabel *)firstlab
53 {
54 //判断是否已经有了，若没有，则进行实例化
55 if (!_firstlab) {
56 _firstlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 10, 300, 30)];
57 [_firstlab setTextAlignment:NSTextAlignmentCenter];
58 [self.view addSubview:_firstlab];
59 }
60 return _firstlab;
61 }
62
63 /**2.图片控件的延迟加载*/
64 -(UIImageView *)icon
65 {
66 //判断是否已经有了，若没有，则进行实例化
67 if (!_icon) {
68 _icon=[[UIImageView alloc]initWithFrame:CGRectMake(POTOIMGX, POTOIMGY, POTOIMGW, POTOIMGH)];
69 UIImage *image=[UIImage imageNamed:@"biaoqingdi"];
70 _icon.image=image;
71 [self.view addSubview:_icon];
72 }
73 return _icon;
74 }
75
76 /**3.描述控件的延迟加载*/
77 -(UILabel *)lastlab
78 {
79 //判断是否已经有了，若没有，则进行实例化
80 if (!_lastlab) {
81 _lastlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)];
82 [_lastlab setTextAlignment:NSTextAlignmentCenter];
83 [self.view addSubview:_lastlab];
84 }
85 return _lastlab;
86 }
87
88 /**4.左键按钮的延迟加载*/
89 -(UIButton *)leftbtn
90 {
91 //判断是否已经有了，若没有，则进行实例化
92 if (!_leftbtn) {
93 _leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
94 _leftbtn.frame=CGRectMake(0, self.view.center.y, 40, 40);
95 [_leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
96 [_leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
97 [self.view addSubview:_leftbtn];
98 [_leftbtn addTarget:self action:@selector(leftclick:) forControlEvents:UIControlEventTouchUpInside];
99 }
100 return _leftbtn;
101
102 }
103
104 /**5.右键按钮的延迟加载*/
105 -(UIButton *)rightbtn
106 {
107 if (!_rightbtn) {
108 _rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];
109 _rightbtn.frame=CGRectMake(POTOIMGX+POTOIMGW+10, self.view.center.y, 40, 40);
110 [_rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
111 [_rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
112 [self.view addSubview:_rightbtn];
113 [_rightbtn addTarget:self action:@selector(rightclick:) forControlEvents:UIControlEventTouchUpInside];
114 }
115 return _rightbtn;
116 }
117
118 //array的get方法
119 -(NSArray *)array
120 {
121 if (_array==nil) {
122 NSString *path=[[NSBundle mainBundle] pathForResource:@"data" ofType:@"plist"];
123 _array=[[NSArray alloc]initWithContentsOfFile:path];
124 }
125 return _array;
126 }
127
128 -(void)rightclick:(UIButton *)btn
129 {
130 self.i++;
131 [self change];
132 }
133
134 -(void)leftclick:(UIButton *)btn
135 {
136 self.i--;
137 [self change];
138 }
139
140 @end