javascript瀑布流式图片懒加载实例解析与优化_javascript技巧
程序员文章站
2022-04-16 17:41:12
...
之前写过一版图片“懒加载”的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《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
按照可配置的想法来优化我现在的代码就是下面的这个样子的:
loadFirstSrceen: function() { // 加载首屏 var _this = this; var currentNodeTop; var imgNodeList = _this.imgNode; $(imgNodeList).each(function() { currentNodeTop = $(this).offset().top; if (currentNodeTop
更重要的一个方面就是按照编写插件的思想来组织现在的代码结构。代码如下:
;(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 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瀑布流式图片懒加载有了更深的认识,学会优化方法,谢谢大家的阅读。
推荐阅读
-
javascript瀑布流式图片懒加载实例_javascript技巧
-
javascript瀑布流式图片懒加载实例解析与优化_javascript技巧
-
解析javascript图片懒加载与预加载的分析总结
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)_javascript技巧
-
解析javascript图片懒加载与预加载的分析总结
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)_javascript技巧
-
JS操作XML实例总结(加载与解析XML文件、字符串)_javascript技巧
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)_javascript技巧
-
解析javascript瀑布流原理实现图片滚动加载_javascript技巧
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)_javascript技巧