在一次项目中需要做一个电子书,然后再网上找了一个电子书的模板,但是我所做的项目时电子版的图刊,需要加载有很多图片,当完成后上传了100多张图片,这个时辰创造加载非常的慢 ,结果要好久才出来,这是我就想到了我夙昔一个项目那时也是因为网站首页图片太大太多,js插件也多致使首页掀开速度奇慢非常 ,厥后用图片懒加载略微优化了一下创造结果还不错,那时是盘算用jquery.lazyload.js 去做的,试了半天都创造没有结果因此就自己写了一个简单的图片的懒加载。
思绪跟网上大家说的差不多,就是在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