网站建设：网站前端制作之图片懒加载的功能介绍

在一次项目中需要做一个电子书，然后再网上找了一个电子书的模板，但是我所做的项目时电子版的图刊，需要加载有很多图片，当完成后上传了100多张图片，这个时候发现加载非常的慢 ，效果要很久才出来，这是我就想到了我以前一个项目当时也是因为网站首页图片太大太多，js插件也多导致首页打开速度奇慢无比 ，后来用图片懒加载稍微优化了一下发现效果还不错，当时是打算用jquery.lazyload.js 去做的，试了半天都发现没有效果于是就自己写了一个简单的图片的懒加载。

思路跟网上大家说的差不多，就是在img标签上放一张临时图片 然后定义一个data-img 的属性，然后自己更具网站的实际需求写 替换图片的事件，  我这里是电子书 做的点击事件。

前端制作2

$('#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_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

河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,响应式网站建设价格,河南网站设计制作

https://www.cnblogs.com/yzg1/p/5051554.html

lazyload.js下载地址是github上的

https://codeload.github.com/tuupola/lazyload/legacy.zip/1.9.3

河南亿宏世纪网络科技有限公司，专注于互联网+品牌整合营销，公司拥有专业的互联网管理、运营策划、UI设计、技术开发等团队，专业从事于工业互联网的开发建设。我司拥有成熟的网络技术开发团队，针对网站开发、技术服务、网站风格定位、网站功能优化、网站推广维护等都具备很强的专业技术水平，旨在为客户提供专业的互联网应用解决方案。公司始终秉持着诚信经营、质量为先的经营理念，我们不仅提供优质的网络技术和云端供应链服务，而且还在产品的选择、应用等方面提供专业的咨询与售后服务。