|
經常上tudou網,發(fā)現tudou首頁加載圖片的功能很有意思,tudou首頁從"娛樂"這個板塊往下的所有視頻的縮略圖并不是在頁面打開后就加載的,
而是當用戶拖動滾動條到了"娛樂"這個板塊,才開始加載圖片的。這樣做的好處當然是如果有用戶不需要查看下面的內容,則免去了下面所有圖片的請求,
這對減少服務器的壓力還是很有幫助的。
經常上tudou網,發(fā)現tudou首頁加載圖片的功能很有意思,tudou首頁從"娛樂"這個板塊往下的所有視頻的縮略圖并不是在頁面打開后就加載的,而是當用戶拖動滾動條到了"娛樂"這個板塊,才開始加載圖片的。這樣做的好處當然是如果有用戶不需要查看下面的內容,則免去了下面所有圖片的請求,這對減少服務器的壓力還是很有幫助的。
實現:
其實tudou的實現原理很簡單,
1.先把所有需要延遲加載的圖片的src都設置成同1個小圖片的連接(sprite.gif),把真真圖片的連接放進圖片的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知識庫:名站技術分析 - 淺談tudou.com首頁圖片延遲加載的效果,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。