首页 JS特效 jQuery特效 jQuery的图片懒加载代码

jQuery的图片懒加载代码

jQuery的图片懒加载代码

jQuery的图片懒加载代码

js代码
<script src="js/jquery.min.js"></script>
<script>
var _content = []; //临时存储li循环内容
var moreload = {
_default:10, //默认显示图片个数
_loading:5,  //每次点击按钮后加载的个数
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>全部加载完毕...</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>
免责声明

本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn

相关文章

js和jquery如何实现自动加载图片(附代码) js和jquery如何实现自动加载图片(附代码)

14 Apr 2018

这次给大家带来js和jquery如何实现自动加载图片(附代码),js和jquery实现自动加载图片的注意事项有哪些,下面就是实战案例,一起来看一下。

微信小程序中PHP开发的图片懒加载实现方法 微信小程序中PHP开发的图片懒加载实现方法

01 Jun 2023

随着移动互联网的快速发展,小程序作为一种全新的应用形态,受到越来越多人的青睐。在小程序开发中,图片展示是非常常见的需求,而懒加载则是其中一个非常有用的技术。什么是懒加载?懒加载是指在页面滚动到可视区域时才加载图片,以提高页面的加载速度和用户的体验。在微信小程序中,采用懒加载技术可以减少页面打开时的流量、节省带宽,同时也能够提高用户的体验感,让用户感到页面加载

如何使用 jQuery 加载动态插入的 iframe 后执行代码? 如何使用 jQuery 加载动态插入的 iframe 后执行代码?

15 Nov 2024

如何在动态插入的 iframe 中利用 jQuery .ready 事件当使用 jQuery Thickbox 动态插入 iframe 时,...

jQuery实现表单里文字按钮特效合集 jQuery实现表单里文字按钮特效合集

25 Apr 2018

这次给大家带来jQuery实现表单里文字按钮特效合集,jQuery实现表单里文字按钮特效的注意事项有哪些,下面就是实战案例,一起来看一下。

jQuery 如何高效地选择具有特定 CSS 属性的元素? jQuery 如何高效地选择具有特定 CSS 属性的元素?

30 Nov 2024

在 jQuery 中选择具有特定 CSS 属性的元素问题:我们如何有效地选择拥有特定 CSS 属性的所有元素...

如何在 jQuery 中捕获鼠标滚轮事件? 如何在 jQuery 中捕获鼠标滚轮事件?

26 Oct 2024

在 jQuery 中捕获鼠标滚轮事件 jQuery 提供了一种有效的方法来捕获特定的鼠标滚轮事件,与滚动事件不同。这...

如何使用 jQuery 和 JavaScript 高效解析和显示 JSON 数据? 如何使用 jQuery 和 JavaScript 高效解析和显示 JSON 数据?

06 Dec 2024

使用 jQuery 和 JavaScript 解析 JSON 数据这个简短的教程解决了有效操作 JSON 数据的挑战,特别是...

jQuery与Zepto是什么区别 jQuery与Zepto是什么区别

20 Nov 2020

jQuery与Zepto区别:1、添加id时jQuery不会生效而Zepto会生效;2、zepto中没有为原型定义extend方法而jquery有;3、zepto由盒模型决定,而jquery会忽略盒模型。

css3动画和jquery动画有什么区别 css3动画和jquery动画有什么区别

28 Apr 2022

css3动画和jquery动画的区别:1、css3可以设置3d动画,jquery不能实现3d动画;2、css的2d矩阵动画效率较高,其他属性动画效率低,jquery利用margin和left、top模拟的矩阵动画效率低,其他属性动画效率高。

See all articles See all articles

Hot Tools

jQuery2019情人节表白放烟花动画特效

jQuery2019情人节表白放烟花动画特效

一款抖音上很火的jQuery情人节表白放烟花动画特效,适合程序员、技术宅用来向心爱的姑娘表白,无论你选择愿意还是不愿意,到最后都得同意。

layui响应式动画登录界面模板

layui响应式动画登录界面模板

layui响应式动画登录界面模板

520情人节表白网页动画特效

520情人节表白网页动画特效

jQuery情人节表白动画、520表白背景动画

炫酷的系统登录页

炫酷的系统登录页

炫酷的系统登录页

HTML5磁带音乐播放器-CASSETTE PLAYER

HTML5磁带音乐播放器-CASSETTE PLAYER

HTML5磁带音乐播放器-CASSETTE PLAYER