JavaScript picture preload

Picture preloading is a very common feature that is used by both PC and mobile, especially on mobile, as long as it involves loading more images. The following is used by the mobile side, introducing the Zepto.

<!     DOCTYPE html>;} . IMG-wrap{width:100%;overflow:hidden;background-repeat:no-repeat;background-Size:cover;} . IMG-wrap img{width:100%;} </style>
Lazyload.js:
varLazyload =function(container) {varLazyclsname = "Util-lazyload";//Picture Style namevar$container =container; varThreshold = 1; //gets the element under the container that needs to be lazy loaded    functiongetlazyelements (container) {return$container. Find ("." +lazyclsname); }    //Browser scrolling axis scrolling    varHandlescroll =function() {        varelements =getlazyelements (container); Elements.each (function() {            if(!belowthefold ($ ( This))) {                $( This). Trigger ("appear");        }        });  for(vari = 0, length = elements.length; i < length; i++) {            if(elements[i].loaded = = =true) {$ (elements[i]). Removeclass (Lazyclsname);    }        }    }; if($container. Data ("Lazyload")!==true) {$ (window). On (' Scroll ', Handlescroll); $container. On ("Appear", "." + Lazyclsname,function(e) {vartarget =E.target; if(target.loaded!==true) {preload (target); target.loaded=true;        }        }); $ (container). Data (' Lazyload ',true); }    //picture Pre-loading    functionpreload (Element) {varimg = document.createelement (' img ')), SRC= Element.attr (' Data-origin '); $ (IMG). bind ("Load",function() {element.parent (). CSS (' BackgroundImage ', ' url (' + src + ') '); Element.css (' Visibility ', ' hidden '); }). bind (' Error ',function() {$self. css (' Visibility ', ' visible '); }). attr ("SRC", SRC); }    //determine if the visible area    functionBelowthefold (element, threshold) {varFold = Window.innerheight +window.scrolly; returnFold <=$ (Element). Offset (). Top; }        /*Force Initial Check if images should appear.*/setTimeout (Handlescroll,0); return$ (container);}; Lazyload ($ (". Lazyload-wrap"));
JavaScript picture preload