-
首页
-
网站建设
-
优化推广
-
案例
方案
方案
Solutions
电商平台
电商网站开发
E-commerce & System
微信营销
资讯
我们
我们
About Us
联系
联系
Contact Us
-
- 联系方式
- 业务热线： 023-68168040
- 邮箱： foxl@hulingweb.cn
- 人才招聘
- HR邮箱：
- 190014322@qq.com
精准传达 • 价值共享
洞悉互联网前沿资讯，探寻网站营销规律
重庆网站前端制作之图片懒加载的功能介绍
作者：狐灵科技 | 2020-03-22 20:51 |点击：
思路跟网上大家说的差不多，就是在img标签上放一张临时图片 然后定义一个data-img 的属性，然后自己更具网站的实际需求写 替换图片的事件， 我这里是电子书 做的点击事件。
$('#next_page_button').click(function() {
var dong_num= $(this).data('num');
var all_num = dong_num+5;
$(this).data('num',all_num);
$('.lazy').each(function() {
var $img = $(this);
var img_num = $img.data('num');
if (img_num <= all_num) {
var dong_num = $img.data('img');
$img.attr('src',dong_num);
}
});
});
这里是想法是第一次加载只展示5张 然后没触发一次事件就去判断当前的data-num值， 提前加载5张，把num的值小于当前数值num的img标签内的默认图片都替换为需要展示的图片。然后把点击事件上的num值改成当前判断的值，做好下次事件的数值判断。这是一个简单例子，希望能给你们一些解决问题灵感。
当然如果网站的布局有规律也可以尝试使用jquery.lazyload.js
分享一个lazyload.js详解
https://www.cnblogs.com/yzg1/p/5051554.html
lazyload.js下载地址是github上的
https://codeload.github.com/tuupola/lazyload/legacy.zip/1.9.3
—— 微信公众号 ——
上一篇———————
在重庆做竞价推广不见成效的原因是什么？下一篇———————
织梦多城市插件安装图文教程【伪静态版】
关于狐灵科技
+狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！
我们的优势
多项网站设计传播大奖
营销型网站建设专家
自主研发网站管理系统
B2C电商网站建设供应商
完善的售后服务体系
我们的不同
+在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！
公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：023-68168040
Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有
| 渝ICP备19005721号-1 
渝公网安备 50010702505582号
专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图
