欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

圖片動(dòng)態(tài)加載技術(shù)應(yīng)用及jquery.lazyload插件使用實(shí)例

  發(fā)布時(shí)間:2013-06-20 11:07:41   作者:佚名   我要評(píng)論
圖片動(dòng)態(tài)加載原理并不復(fù)雜,圖片還是用原來的img標(biāo)簽,src指向一個(gè)默認(rèn)的小圖。這個(gè)功能現(xiàn)在被做成了很多插件.我用的叫 jquery.lazyload,下面與大家分享下它的具體引用與調(diào)用方法,感興趣的朋友可以參考下哈
應(yīng)用實(shí)例小站 http://www.uhuigou.net
圖片動(dòng)態(tài)加載不算什么新東西了,很多大站都在用,優(yōu)勢(shì)很明顯,主要是節(jié)省流量(包括服務(wù)器和客戶端),給用戶的體驗(yàn)也要好些,可以提高頁面的打開速度.
原理也不復(fù)雜,圖片還是用原來的img標(biāo)簽,src指向一個(gè)默認(rèn)的小圖,比如loading之類,然后自定義一個(gè)img的屬性保存真正的圖片地址,當(dāng)用戶訪問到這個(gè)圖片位置的時(shí)候,通過js控制把src的值改成自定義屬性的值.

這個(gè)功能現(xiàn)在被做成了很多插件.我用的叫 jquery.lazyload ,需要的到我的站上直接下載吧,只需要這一個(gè)文件就夠了,當(dāng)然你還得有jqeruy
使用方法也很簡(jiǎn)單,原來的img標(biāo)簽加一個(gè) data-original 屬性保存真實(shí)的圖片地址,例子如下

復(fù)制代碼
代碼如下:

<img class="lazy" src="http://bcs.duapp.com/uhuigou/loading.gif" data-original="http://bcs.duapp.com/uhuigou/201306200831326313.jpg" style="width: 100%; display: inline-block;">

需要?jiǎng)討B(tài)加載的img都這么寫就可以了, jquery.lazyload 只認(rèn)data-original,style或者其他屬性根據(jù)需要隨便寫
最后還要在頁面的jquery.ready事件中初始化一下

復(fù)制代碼
代碼如下:

$(function() {$("img.lazy").lazyload();});

好了大功告成!

相關(guān)文章

最新評(píng)論