Home

JS special effects

jQuery effects

jQuery image lazy loading code

Download Now Preview

js 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>

Disclaimer

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

JQuery image lazy loading plug-in, dynamically obtain image length and width dimensions_html/css_WEB-ITnose

24 Jun 2016

JQuery image lazy loading plug-in, dynamically obtain image length and width dimensions

jQuery Run Code After Image Loads

08 Mar 2025

Simple jQuery code snippet to wait for an image to load before running some code. The only drawback is you would need to supply the image name (including extension). $('#myImage').attr('src', 'image.jpg').load(function() { //run code alert('Imag

What are React's performance optimization techniques (memoization, code splitting, lazy loading)?

18 Mar 2025

The article discusses React's performance optimization techniques: memoization, code splitting, and lazy loading. These methods enhance app efficiency by reducing load times and preventing unnecessary re-renders.

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...

div css jQuery image horizontal scrolling code (with left and right click buttons)_html/css_WEB-ITnose

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...

CSS3 JQUERY page scrolling effect code_html/css_WEB-ITnose

24 Jun 2016

CSS3 JQUERY page scrolling effects code

58 jQuery simulated CSS3 transition page switching effects_html/css_WEB-ITnose

24 Jun 2016

58 jQuery simulated CSS3 transition page switching effects

See all articles

Hot tools Tags

PHP editors

Development tools

PHP IDE

PHP framework

PHP debugging tools

PHP extensions

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.