經(jīng)常上tudou網(wǎng)，發(fā)現(xiàn)tudou首頁(yè)加載圖片的功能很有意思，tudou首頁(yè)從"娛樂(lè)"這個(gè)板塊往下的所有視頻的縮略圖并不是在頁(yè)面打開(kāi)后就加載的，

　　而是當(dāng)用戶拖動(dòng)滾動(dòng)條到了"娛樂(lè)"這個(gè)板塊，才開(kāi)始加載圖片的。這樣做的好處當(dāng)然是如果有用戶不需要查看下面的內(nèi)容，則免去了下面所有圖片的請(qǐng)求，

　　這對(duì)減少服務(wù)器的壓力還是很有幫助的。

　　 經(jīng)常上tudou網(wǎng)，發(fā)現(xiàn)tudou首頁(yè)加載圖片的功能很有意思，tudou首頁(yè)從"娛樂(lè)"這個(gè)板塊往下的所有視頻的縮略圖并不是在頁(yè)面打開(kāi)后就加載的，而是當(dāng)用戶拖動(dòng)滾動(dòng)條到了"娛樂(lè)"這個(gè)板塊，才開(kāi)始加載圖片的。這樣做的好處當(dāng)然是如果有用戶不需要查看下面的內(nèi)容，則免去了下面所有圖片的請(qǐng)求，這對(duì)減少服務(wù)器的壓力還是很有幫助的。

　　實(shí)現(xiàn):

　　其實(shí)tudou的實(shí)現(xiàn)原理很簡(jiǎn)單，

　　1.先把所有需要延遲加載的圖片的src都設(shè)置成同1個(gè)小圖片的連接(sprite.gif)，把真真圖片的連接放進(jìn)圖片的alt屬性中，look下代碼：

 <a class="inner" target="new" title="史上最重街舞選手和最柔軟街舞選手" >   <img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/></a>   

it知識(shí)庫(kù)：名站技術(shù)分析 - 淺談tudou.com首頁(yè)圖片延遲加載的效果，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。