Now sets the SRC path for the IMG element to the background picture, and the img URL path is stored in a custom attribute
Picture delay technology General ideas 1. The SRC path corresponding to the IMG element is set to the background picture, and the img URL path is stored in a custom attribute (for src substitution). 2. Gets the height of the reel and the height of the window 3 loops require an IMG array that is delayed to load, gets the height of the IMG, and determines whether the element is in a visual window. If the element is in the visual window, then the SRC replacement for the test code html code is as follows: <style> . Wrap { margin: 20px auto; width:150px; } . Wrap Div { border:1px dotted #E29808; height:30px; line- height:30px; margin:5px auto; text-align:center; width:150px; } . Wrap sortable Background-color: #E6D6AB; border:1px solid #E29808; } #showImg li{ width:30%; margin-left:2%; margin-top:15px; height:300px; float:left; background: #CCC; } # Showimg li:nth-child (3n) { margin-left:3%; } #showImg li img{ width:100%; max-height:100% ; } </style> </head> <body> <div id= "showimg" > < Li><img src= "http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" alt= "test"/></li > <li><img src= "http://cdn.duitang.com/uploads/item/201306/07/20130607171626_QkC3T.thumb.600_ 0.jpeg "alt=" test "/></li> <li><img src=" u5238p115dt20110127111837.jpg "alt=" test "/>< /li> </div> </body> JS part code as follows: Var imgsglobal=[ "http:// Cdn.duitang.com/uploads/item/201306/07/20130607171626_qkc3t.thumb.600_0.jpeg ", " http://img4.duitang.com/ Uploads/item/201306/07/20130607172438_teijr.jpeg ", " http://cdn.duitang.com/uploads/item/201306/08/ 20130608190311_bywca.thumb.600_0.jpeg ", " b003u5taty_01_amzn.jpg ", " http://www.yishun.net/ Tuysl3r1exnpbwcwnc50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2k0lzc0mdy1mdazmi9uml9hbmvy Anrhwfhywfhywfhfise3nda2ntawmziuanbn.jpg ", " http://www.yishun.net/ Tuysl3r1exnpbwcwmy50yw9iyw9jzg4uy29tl2ltz2v4dhjhl2kzlzc0mdy1mdazmi9umkvhbf9ya VhjWFhYWFhYWFHfise3nda2ntawmziuanbn.jpg ", " Http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg ", "Http://img4.duitang.com/uploads/item/201304/29/20130429142901_SQjJv.thumb.600_0.jpeg", "http:// Img4.duitang.com/uploads/item/201112/04/20111204170801_fibkm.jpg ", " http://img2.duitang.com/uploads/item/ 201211/06/20121106233027_ldqas.thumb.600_0.jpeg ", " u5238p115dt20110127111837.jpg ", " http:// Img2.duitang.com/uploads/item/201209/24/20120924162953_hlpje.jpeg ", " 20110624085901-745594320.jpg ", "Http://img4.duitang.com/uploads/item/201206/15/20120615185646_uzmrt.thumb.600_0.jpeg", "http:// Img4.duitang.com/uploads/item/201202/11/20120211213039_u4sj8.thumb.600_0.jpg ", " http://cdn.duitang.com/ Uploads/item/201201/25/20120125145922_n4vz8.thumb.600_0.jpg " ]; function Addimgele () { var str="; for (Var i=0, len=imgsglobal.length i<len; i++) { str+= ' <li><img class= ' lazyimg ' src= ' wait ' Resrc= "' +imgsglobal[i]+ '/></li> ' } $ ("#showImg"). Append (str); } $ (document). Ready (function () { Addimgele (); }); (function (Win) { var lazyload=win[' lazyload ']| | {}; var camelize = function (s) { return S.replace (/-(w)/g, function (Strmatch, p1) { return P1.toupperc ASE (); }); }; lazyload={ init:function (imgclass) { var offsetpage = Window.pageYOffset? window.pageyoffset:window.document.documentelement.scrolltop, Offsetwindow = offsetPage + number ( Window.innerheight? Window.innerHeight:document.documentElement.clientHeight); var imgeles=imgclass; for (Var i=0, len= Imgeles.length; i<len; i++) { if Imgeles[i].getattribute ("resrc") = = "Show") { continue; } var o=imgeles[i]; if (o ) { postpage = O.getboundingclientrect (). Top + Window.document.documentElement.scrollTop + window.document.body.scrolltop; Postwindow = postpage + number (This.getstyle(o, ' height '). Replace (' px ', ')); if (Postpage > Offsetpage && postpage < Offsetwindow) | | (Postwindow > Offsetpage && postwindow < Offsetwindow)) { var src=o.getattribute ("Resrc"); o.setattribute ("src", src); o.setattribute ("Resrc", "show"); } } } }, getstyle:function (element, property) { if (arguments.length!= 2) return FA lse; var value = Element.style[camelize (property)]; if (!value) { if (Document.defaultview && D Ocument.defaultView.getComputedStyle) { var css = Document.defaultView.getComputedStyle (element, NULL); Value = CSS? Css.getpropertyvalue (property): null; } else if (element.currentstyle) { value = element.currentstyle[ Camelize (property)]; } } return value = = ' Auto '? ': value; } } win.lazyload=lazyload; } ' (window); $ (document). Ready (function () { Lazyload.init ($ ("img.lazyimg"));nbsp Window.onscroll=function () { Lazyload.init ($ ("img.lazyimg")); } }); Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
