第JS圖片延遲加載插件LazyImgv1.0用法分析metacharset="utf-8"/

linkrel="stylesheet"href="css/main.css"rel="externalnofollow"type="text/css"/

scripttype="text/javascript"src="js/lazyImg.v1.0.min.js"/script

/head

body

h1imgsrc="images/default.png"lazy-data="images/tit.png"width="460"height="160"alt="LazyImgv1.0圖片延遲加載插件"http://h1

div

em注：/emLazyImg必須定義lazy-data屬性，屬性值是src的圖片路徑

em引入JS文件：/emscripttype="text/javascript"src="js/lazyImg.v1.0.js"/script

em下載地址：/em

ahref="js/lazyImg.v1.0.js"rel="externalnofollow"target="_blank"點擊它！/a

ahref="js/lazyImg.v1.0.min.js"rel="externalnofollow"target="_blank"點擊它(壓縮版)！/a

/div

div

默認情況下:在IMG中滿足以任何一個條件，都會加載圖片；

1、沒有class屬性

2、如果有class屬性并且屬性中不包含以"lazy-"為前綴的css樣式名

/div

div

如何禁止默認加載圖片

emJS代碼:/emLzDefault.action=false;

/div

div

如何在點擊事件時顯示圖片

emJS代碼:/emLazyImg.lazy("lazy-name");

imglazy-data="圖片路徑"/

em"lazy-name"/em中的name是可以自定義，"lazy-"是前綴必須存在

/div

liimgsrc="images/default.png"lazy-data="images/1.png"width="161"height="161"alt="1"http://li

liimgsrc="images/default.png"lazy-data="images/2.png"width="161"height="161"alt="2"http://li

liimgsrc="images/default.png"lazy-data="images/3.png"width="161"height="161"alt="3"http://li

liimgsrc="images/default.png"lazy-data="images/4.png"width="161"height="161"alt="4"http://li

liimgsrc="images/default.png"lazy-data="images/5.png"width="161"height="161"alt="5"http://li

liimgsrc="images/default.png"lazy-data="images/6.png"width="161"height="161"alt="6"http://li

liimgsrc="images/default.png"lazy-data="images/7.png"width="161"height="161"alt="7"http://li

liimgsrc="images/default.png"lazy-data="images/8.png"width="161"height="161"alt="8"http://li

liimgsrc="images/default.png"lazy-data="images/9.png"width="161"height="161"alt="9"http://li

/ol

div

默認加載了1、2、3、7、8、9圖片，當點擊下面的按鈕時會加載4、5、6圖片

imgsrc="images/default.png"lazy-data="images/click.png"width="184"height="48"/

/div

div/div

script

varshowImg=function(){

LazyImg.lazy("lazy-456");

//以下定義默認不執(zhí)行延遲加載

//LzDefault.action=false;

/script

/body

/html

附：完整實例代碼點擊此處本站下載。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結》