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
24 Jun 2016
JQuery image lazy loading plug-in, dynamically obtain image length and width dimensions
Learn how to build a lazy-loading image gallery with Tailwind CSS and JavaScript
03 Jan 2025
Happy 20205! I am back with a quick tutorial on creating a lazy-loading image gallery using Tailwind CSS and JavaScript. What is lazy-loading? Lazy-loading optimises performance by loading images and media only when they’re needed—such as when they
How to Set Timeouts for Asynchronous Image Loading with jQuery?
12 Nov 2024
Asynchronous Image Loading with jQueryIt's essential to load images asynchronously to avoid blocking the page's rendering and ensure a smooth user...
24 Jun 2016
div css jQuery image horizontal scrolling code (with left and right click buttons)
How can I display a loading image during an AJAX request using jQuery?
21 Nov 2024
Displaying Loading Image During Ajax ExecutionTo indicate asynchronous request execution, displaying a loading image is often desired. Let's...
24 Jun 2016
CSS3 JQUERY page scrolling effects code
24 Jun 2016
58 jQuery simulated CSS3 transition page switching effects
jquery waterfall flow LightBox picture box special effects
06 Jul 2016
jquery waterfall flow LightBox picture box special effects
How to Maintain jQuery Mouseover Effects in ASP.NET UpdatePanels?
03 Dec 2024
jQuery $(document).ready and UpdatePanels: A Refined LookWhen utilizing jQuery to apply mouseover effects to elements within an UpdatePanel, the...
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