The screen scrolls to the current position of the picture to load the picture, setting a Data-url property for the picture that needs to be preloaded.
;(function ($) {/* picture preloaded @author liuming @demo $ (' img[data-url] '). Imgloading (); */$.fn. Imgloading=function () {var aimgs =$ (this),/* Cache Picture List */$win = $ (window), Img,imgtop, Winh = $win. Height (), timmer=null, I, scrolltop; $win. Bind (' Load scroll. Imgloading ', function () {if (Timmer) {cleartimeout (Timmer);} Timmer = SetTimeout (eachimg,100); }); function eachimg () {/* array is empty purge event */if (aimgs.length==0) {return $win. Unbind (' Scroll. Imgloading ');} ScrollTop = $win. scrolltop (); for (i=aimgs.length-1; i>-1; i--) {img = $ (aimgs[i]); Imgtop = Img.offset (). Top; /* Determine if the picture is on the screen */if (Scrolltop+winh > Imgtop && scrolltop<Imgtop+winh) {img.attr (' src ', img.attr (' Data-url ')); Aimgs.splice (i,1); }}}}) (JQuery);
"jquery plugin" picture preload