Picture Lazy Load

Two pictures lazy load way first by JS Intermediate group Chengdu-witch hunt second by Shanghai-zenki
@description ready to use plug-ins for picture preloading
Use the picture container CSS class named Lazy-load-wrap
Picture Real address is data-lazy-src
When the Lazy-load-wrap container enters the viewport, it starts replacing all the picture paths in the container that require lazy loading and changes the loading state of the container
The first of these methods
$.fn.compasslazyload=function () {
var _height=window.innerheight,
_lazyloadwrap=$ ('. Lazy-load-wrap ');

var methods={
Setoffsettop:function () {
$.each (_lazyloadwrap,function (i,n) {
$ (n). attr ({
' Top ': n.offsettop-_height,
' Status ': ' Wait '
});
})
},
Isshow:function () {
var _scrolltop=$ (window). scrolltop;
Use the image container to determine whether to enter the viewport, rather than the image itself
$.each (_lazyloadwrap,function () {
var _that=$ (this);
if (_that.attr (' status ') = = = = ' Done ') {
Return
};
if (_that.attr (' top ') <=_scrolltop) {
_that.find (' img[data-lazy-src] '). each (function (i,n) {
n.src=$ (n). Data (' lazy-src ');
});
_that.attr (' status ', ' done ');
};
})
},
Scroll:function () {
$ (window). On (' scroll ', function () {
Methods.isshow ();
});
},
Init:function () {
Methods.setoffsettop ();
Methods.isshow ();
Methods.scroll ();
}
};
Methods.init ();

}

The second method of

var exist= (function ($) {
var timer=null,
Temp=[].slice.call ($ ('. container '));
ret={};

for (Var i=0,len=temp.length-1;i<=len;i++) {
Ret[i]=temp[i];
}
var isexist=function (wintop,winend) {
for (var i in ret) {
Console.log (ret);
var item=ret[i],
Eletop=item.offsettop,
Eleend=eletop+item.offsetheight;

if ((eletop>wintop&&eletop<=winend) | | | (Eleend>wintop&&eleend<=winend)) {
$ (item). CSS (' background ', ' none ');
New Tab ($ (item). attr (' id '), data). Init;
Delete Ret[i];
}
}
}
return {
Timer:timer;
Isexist:isexist;
};
})($);

//Third method
Zepto (function ($) {
var swiper = new Swiper ('. Swiper-container ', {
pagination: '. Swiper-pagination ',
Paginationclickable:true,
autoplay:3000,
Loop:true,
Autoplaydisableoninteraction:false
});
(function Lazyload () {
var IMGs = $ (". Lazyload");
var src = ';
$.each (IMGs, function (index, item) {
src = $ (item). attr (' data-src ');
$ (item). attr (' src ', src);
});
}) ();
});
$ (function () {
var lazyloadtimerid = null;
//Smart Load Event
$ (window). Bind ("scroll", function () {
Cleartim Eout (Lazyloadtimerid);
Lazyloadtimerid = setTimeout (function () {
//delay Loading all pictures
var ishttp = (Location.protocol = = = "http:");
$ ("#ym_images img"). each (function () {
var-= $ (this);
if (Self.filter (": Above-the-fold"). Length > 0) {
var originurl = self.attr ("data-original");
self.attr ("src", originurl);
}
});
}, 500);
});
});

Waterfall Stream Infinite Load instance
(function ($) {
$ (function () {
var $container = $ ('. List-wrap-gd ');
function Layoutcallback () {
$container. imagesloaded (function () {
$container. Masonry ({
Itemselector: '. Item-bar ',
Gutter:10
});
});
$container. imagesloaded (). Progress (function () {
$container. Masonry (' layout ');
});
}

Layoutcallback ();

$container. Infinitescroll ({
Navselector: "#more",
Nextselector: "#more a",
Itemselector: ". Item-bar", br> pixelsfromnavtobottom:300,
loading:{
img: "/images/masonry_loading.gif",
Msgtext: ',
Finishedmsg : "<em> has reached the last page </em>",
Finished:function () {
$ ("#more"). Remove ();
$ ("#infscr-loading"). Hide ( );
}
},
Errorcallback:function () {
$ (window). Unbind ('. Infscr ');
},
Pathparse:function (Path, NextPage) {
var query = "";
var keyword=$ ("#search_keyword"). Val ();
var cat_id=$ ("#cat_id"). Val ();
var brand_id=$ ("#brand_id"). Val ();
var country_id = $ ("#country_id"). Val ();
Query = query + "&namekeyword=" +keyword;
Query = query + "&cat_id=" +cat_id
query = query + "&brand_id=" + brand_id;
Query = query + "&country_id=" + country_id;
Path = [Path,query];
return path;
}
},

function (newelements) {
var $newElems = $ (newelements). css ({opacity:0});
$newElems. imagesloaded (function () {
$newElems. Animate ({opacity:1});
$container. Masonry (' appended ', $newElems, true);
Layoutcallback ();
});
});
});
}) (JQuery);

Set the cache, Localstorage+cookie
var Historys = {//cache
Islocalstorage:window.localstorage?true:false,
Set:function (Key,value) {//Set cache
if (this.islocalstorage) {
Window.localStorage.setItem (Key,value);
}else{
var expiredays = 365; Expiry time
var exdate=new Date ();
Exdate.settime (Exdate.gettime () +expiredays*24*60*60*1000);
Document.cookie=key + "=" + Escape (value) + "; expires=" + exdate.togmtstring ();
}
},
Read:function (key) {//Read cache
if (this.islocalstorage) {
return Window.localStorage.getItem (key);
}else{
var arr,reg=new RegExp ("(^|)" +key+ "= ([^;] *)(;|$)");
if (Arr=document.cookie.match (reg)) {
Return unescape (arr[2]);
}else{
return null;
}
}
},
Del:function (key) {//delete cache
if (this.islocalstorage) {
Localstorage.removeitem (key);
}else{
var exdate = new Date ();
Exdate.settime (Exdate.gettime ()-1);
var read_val=this.read (key);
if (read_val!=null) document.cookie= key + "=" +read_val+ "; expires=" +exdate.togmtstring ();
}
}
}

Picture Lazy Load