轉(zhuǎn)自:http://my.oschina.net/crazymus/blog/362451?fromerr=L1i2mEW2

在頁(yè)面上圖片比較多的時(shí)候，為了優(yōu)化性能，可以采用延遲加載技術(shù)，我封裝了一款輕量級(jí)的插件。

插件下載地址：

http://pan.baidu.com/s/1c8ziMi

使用方法：

1 在頁(yè)面中需要引入echo.css和echo.min.js

2 對(duì)需要進(jìn)行延遲加載的圖片采用如下寫法：

<img src="blank.gif" style="width:300px;height:300px;" data-echo="test.jpg" />

blank.gif是一張背景圖片，包含在插件里了。圖片的寬高必須設(shè)定，當(dāng)然，可以使用外部樣式對(duì)多張圖片統(tǒng)一控制大小。

data-echo指向的是真正的圖片地址。

3 對(duì)插件進(jìn)行初始化：

echo.init();

就這么簡(jiǎn)單，你將可以看到圖片只有出現(xiàn)在視野內(nèi)時(shí)才會(huì)加載，減少了頁(yè)面的渲染工作量。

?

說(shuō)明：

我們知道，jQuery lazyloading插件已經(jīng)能很好地實(shí)現(xiàn)這一功能，但它基于jQuery，對(duì)于移動(dòng)端可能不太實(shí)用，這款插件不依賴任何第三方庫(kù)，核心文件只有3KB左右，非常適合移動(dòng)端開發(fā)。

轉(zhuǎn)載于:https://www.cnblogs.com/mauricechans/p/5467176.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的关于图片延迟加载的解决方案（针对移动端）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。