jQuery image lazy loading code
jQuery image lazy loading code
<script src="js/jquery.min.js"></script>
<script>
var _content = []; //Temporarily store li loop content
var moreload = {
_default:10, //The number of pictures displayed by default
_loading:5, //The number of items loaded each time the button is clicked
init:function(){
var lis = $(".moreload .hidden li");
$(".moreload ul.list").html("");
for(var n=0;n<moreload._default;n++){
lis.eq(n).appendTo(".moreload ul.list");
}
$(".moreload ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=moreload._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".moreload .hidden").html("");
},
loadMore:function(){
var mLis = $(".moreload ul.list li").length;
for(var i =0;i<moreload._loading;i++){
var target = _content.shift();
if(!target){
$('.moreload .more').html("<p>All loaded...</p>");
break;
}
$(".moreload ul.list").append(target);
$(".moreload ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
moreload.init();
</script>
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
16 May 2016
This article mainly introduces an image delayed loading plug-in implemented using jquery. It also explains the principle of image delayed loading and the function of non-blocking loading of advertisements. Friends who need it can refer to it.
JQuery image lazy loading and proportional scaling plug-in_jquery
16 May 2016
Lazy loading and proportional scaling of images, a simple JQuery plug-in. Friends in need can refer to it.
16 May 2016
This article mainly introduces how to use the Jquery image lazy loading plug-in jquery.lazyload.js. Friends who need it can refer to it.
Network image lazy loading implementation code beyond jquery control_javascript skills
16 May 2016
The principle is to load images in sections, which is mainly used for large websites to save bandwidth. However, the things they provide are compressed and confusing, and some of them are based on some Yahoo library. In short, it is very troublesome, but JQ's controls are clear enough. , but it still does not achieve the effect of saving network bandwidth.
24 Jun 2016
JQuery image lazy loading plug-in, dynamically obtain image length and width dimensions
16 May 2016
This article is translated from Lazy Load Plugin for jQuery, which introduces a jQuery plug-in that provides the function of lazily loading page images.
Image lazy loading js based on jquery
27 Dec 2016
When browsing on Jingdong Mall, you will find that the product pictures are only displayed on one screen. When the page scrolls down, the product pictures below are gradually loaded.
jQuery lazy loading image plug-in Lazy Load usage guide_jquery
16 May 2016
When there are many pictures on the page, opening a page will inevitably cause a large amount of data interaction with the server. Especially for high-definition pictures, they occupy hundreds of K of space. So how can we change this situation? This is the question we are going to discuss today.
A lazy loading component based on jquery
09 Mar 2018
This time I bring you a lazy loading component based on jquery. What are the precautions for lazy loading components based on jquery? Here is a practical case, let’s take a look.
Hot Tools
jQuery2019 Valentine's Day Confession Fireworks Animation Special Effects
A very popular jQuery Valentine's Day confession fireworks animation special effect on Douyin, suitable for programmers and technical geeks to express their love to the girl they love. No matter you choose to be willing or not, you have to agree in the end.
layui responsive animated login interface template
layui responsive animated login interface template
520 Valentine's Day confession web animation special effects
jQuery Valentine's Day Confession Animation, 520 Confession Background Animation
Cool system login page
Cool system login page
HTML5 tape music player-CASSETTE PLAYER
HTML5 tape music player-CASSETTE PLAYER