❶ 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