这篇文章主要针对 javascript 瀑布流式图片懒加载实例进行解析与优化,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
之前写过一版图片 "懒加载" 的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇 {aa0aa} 再来看看图片 "懒加载" 的一些知识。
图片 "懒加载" 的主旨:
按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销。
先来看一段代码:
- 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 瀑布流式图片懒加载有了更深的认识,学会优化方法,谢谢大家的阅读。
来源: http://www.phperz.com/article/17/0221/267008.html