Requirements:
Picture deferred loading. The display load is not finished loading. When the monitor picture is loaded, the load disappears.
Demo
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <Metaname= "Format-detection"content= "Telephone=no"> <Scriptsrc= "Http://m.baidu.com/static/search/3600/zepto.js"></Script> <title></title> <style>. Mod-load{text-align:Center;padding:15px 0;Color:@fontColor4;font-size:12px;@-webkit-keyframes loading{0%{-webkit-transform:Rotate (0deg);}50%{-webkit-transform:Rotate (180deg);}100%{-webkit-transform:Rotate (360deg);}}. icon-loading{Display:Inline-block;width:15px;Height:15px;vertical-align:-4px;Margin-right:6px;Transform-style:preserve-3d;-webkit-backface-visibility:Hidden;-webkit-animation-name:Loading;-webkit-animation-duration:1.2s;-webkit-animation-timing-function:Linear;-webkit-animation-iteration-count:Infinite;-moz-animation-name:Loading;-moz-animation-duration:1.2s;-moz-animation-timing-function:Linear;-moz-animation-iteration-count:Infinite; }. Icon-loading.list-noload{padding:10px 0;font-size:14px;Line-height:40px; } } </style></Head><Body><imgclass= "Lazyloadimg"data-src= "Http://tgi12.jia.com/115/444/15444255.jpg"></img><imgclass= "Lazyloadimg"data-src= "Http://tgi13.jia.com/115/438/15438819.jpg"></img><Script> var$img=$('. Lazyloadimg'); var$body=$('Body'); var$imgsrc; varsrc; varImgload; for (varI=0; I<$img. Length;i++) {loading (); $IMGSRC=$ ($img [i]); SRC=$imgsrc. attr ('data-src'); $imgsrc. attr ('src', SRC). removeattr ('data-src'); Imgload=Document.queryselectorall (". Lazyloadimg") [i]; Imgload.addeventlistener ("Load",function(Event) {$ ('. Mod-load'). Remove (); }); } functionloading () {varloadinghtml= '<div class= "Mod-load list-loading" >' + '' + 'Loading in ...' + '</div>'; $ (loadinghtml). AppendTo ($body); }</Script></Body></HTML>
Delay loading pictures and listen for picture loading complete