java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片“懒加载”的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《javascript瀑布流式图片懒加载实例》再来看看图片“懒加载”的一些知识。
图片“懒加载”的主旨:
按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销。
先来看一段代码:
var conf = {
'loadfirst': true,
'loadimg': true
};
for (var item in conf) {
if (item in co) {
conf.item = co.item;
}
}
这里我主要是想实现,用户配置和默认配置的合并,这样写代码并不是很优雅,现在使用$.extend来做优化,代码如下:
_this.setting = {
"mobileHeight": 0, //扩展屏幕的高度,使第一屏加载个数可配置
"loadNum": 1 //滚动时,当前节点之后加载个数
};
$.extend(_this.setting, _this.getSetting());
这里重点介绍下,我新添加的两个参数mobileHeight,loadNum
mobileHeight 默认客户端的高度,值越大,首屏加载的图片越多;
loadNum 如果当前节点出现在屏幕上以后,可以一次性加载当前节点之后的若干个节点,可以跳高图片的加载速度;
之前我的代码是这样子写的:
_this.loadFirstScreen = function() {
if (conf.loadfirst) {
lazyNode.each(function(i) {
currentNodeTop = $(this).offset().top;
//这里的800就是上面提到的mobileHeight
if (currentNodeTop < mobileHeight + 800) {
_this.replaceImgSrc($(this));
}
});
}
};
_this.loadImg = function() {
if (conf.loadimg) {
$(window).on('scroll', function() {
var imgLazyList = $('[node-type=imglazy]', node);
//这里的5就是上面提到的loadNum
for (var i = 0; i < 5; i++) {
_this.replaceImgSrc(imgLazyList.eq(i));
}
});
}
};
按照可配置的想法来优化我现在的代码就是下面的这个样子的:
loadFirstSrceen: function() {
// 加载首屏
var _this = this;
var currentNodeTop;
var imgNodeList = _this.imgNode;
$(imgNodeList).each(function() {
currentNodeTop = $(this).offset().top;
if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
_this.replaceImgSrc($(this));
}
});
},
scrollLoadImg: function() {
//滚动的时候加载图片
var _this = this;
var currentNodeTop;
var scrollTop = $('body').scrollTop();
var imgLazyList = $('[node-type=imglazy]');
$(imgLazyList).each(function() {
currentNodeTop = $(this).offset().top;
if (currentNodeTop - scrollTop < _this.mobileHeight()) {
//加载当前节点后的规定个数节点
for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
_this.replaceImgSrc($(imgLazyList).eq(i));
}
return false;
}
});
}
更重要的一个方面就是按照编写插件的思想来组织现在的代码结构。代码如下:
;(function($) {
var LoadImgLazy = function(imgNode) {
var _this = this;
_this.imgNode = imgNode;
_this.setting = {
"mobileHeight": 0, //扩展屏幕的高度,使第一屏加载个数可配置
"loadNum": 1 //滚动时,当前节点之后加载个数
};
$.extend(_this.setting, _this.getSetting());
_this.loadFirstSrceen();
$(window).on('scroll', function() {
_this.scrollLoadImg();
});
};
LoadImgLazy.prototype = {
mobileHeight: function() {
return $(window).height();
},
loadFirstSrceen: function() {
// 加载首屏
var _this = this;
var currentNodeTop;
var imgNodeList = _this.imgNode;
$(imgNodeList).each(function() {
currentNodeTop = $(this).offset().top;
if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
_this.replaceImgSrc($(this));
}
});
},
scrollLoadImg: function() {
//滚动的时候加载图片
var _this = this;
var currentNodeTop;
var scrollTop = $('body').scrollTop();
var imgLazyList = $('[node-type=imglazy]');
$(imgLazyList).each(function() {
currentNodeTop = $(this).offset().top;
if (currentNodeTop - scrollTop < _this.mobileHeight()) {
//加载当前节点后的规定个数节点
for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
_this.replaceImgSrc($(imgLazyList).eq(i));
}
return false;
}
});
},
replaceImgSrc: function(loadImgNode) {
//动态替换图片
var srcValue;
var imgDataSrc;
var _this = this;
var imgUrlList = $(loadImgNode).find('img[data-lazysrc]');
if (imgUrlList.length > 0) {
imgUrlList.each(function(i) {
imgDataSrc = $(this).attr('data-lazysrc');
srcValue = $(this).attr('src');
if (srcValue === '#') {
if (imgDataSrc) {
$(this).attr('src', imgDataSrc);
$(this).removeAttr('data-lazysrc');
}
}
});
//移除已经运行过懒加载节点的node-type 对性能提升
$(loadImgNode).removeAttr('node-type');
}
},
getSetting: function() {
var userSetting = $('[lazy-setting]').attr('lazy-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
},
destory: function() {
//销毁方法区
$(window).off('scroll');
}
};
LoadImgLazy.init = function(imgNode) {
new this(imgNode);
};
window.LoadImgLazy = LoadImgLazy;
})(Zepto);
通过这篇文章希望大家对javascript瀑布流式图片懒加载有了更深的认识,学会优化方法,谢谢大家的阅读。
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化相关推荐
- vue-photo-preview踩坑,el-table中一张错误图片导致全部图片无法放大,并且与懒加载v-lazy不兼容
需求:el-table中展示的图片,可以点击放大,并且使用懒加载(偶尔会有404的图片路径) 坑一: 一张404图片会导致全部图片无法放大,用@error解决 坑二: 但是马上发现如果用了vue-la ...
- vue图片懒加载实例
(1)效果演示 如上图所示,在正式图片没有加载出来的时候,展示,默认图片,等待 正式图片加载好了,替换默认图片~~~ (2)代码演示 <template><div><di ...
- SAP UI5 JavaScript文件的lazy load - 懒加载
Created by Wang, Jerry, last modified on May 18, 2016 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- javascript瀑布流效果
javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
- vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...
- 聊一聊前端图片懒加载背后的故事
本文内容 什么是懒加载 如何实现懒加载 监听滚动事件 IntersectionObserver 浏览器原生方案 本文小结 相信大家已经注意到我博客有了一点变化,因为博主最近利用空闲时间对博客进行了优化 ...
- JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式 普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
- jquery之图片懒加载(总结)
2019独角兽企业重金招聘Python工程师标准>>> 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮 ...
- 占位图和图片懒加载项目实战详解
占位图(兜底图): 真实图片太大还没有加载完之前先用一张占位图表示这个位置将来会有图片或者说明这个位置是有图片的但是不知道什么原因真正的图片没有加载出来用户只能看到这张占位图: 什么是图片懒加载: 懒 ...
最新文章
- vue下实现textarea类似密码框的功能之探索input输入框keyup,keydown,input事件的触发顺序...
- 包含 PHP和nginx的镜像 supervisord.conf Dockerfile 案例
- 201521123108《Java程序设计》第14周学习总结
- 供给测结构性改革内容_智能包装结构,提高可测性
- 各大公司(Google,Microsoft,Baidu, Microsoft Research Asia etc.)实习生面试题总汇
- 解决上左右页面框架中iframe的引起的滚动条问题
- Http请求返回最外层的模型
- 这是一个定时器,定时执行一次,用在定时发送邮件
- C++中setw()的用法
- Windows10重装系统教程(超详细)
- 开机直接进入键盘布局_Winodws10系统出现“选择键盘布局”界面如何解决
- python smtp QQ邮箱 发送附件
- Hadoop生态系统
- 深圳市专精特新企业申报流程及奖励政策重点介绍,补贴20-50万
- 程序设计思维与实践 CSP-M2 (3/4/数据班)
- “四舍六入五成双规则” 与 C语言如何实现“四舍五入”
- Datawhale组队学习周报(第048周)
- 【Java--日期的使用】
- Prodigal-原核生物基因预测
- 爬虫项目:获取movie