javascript瀑布流式图片懒加载实例

 更新时间:2020年06月28日 09:17:49   投稿:lijiao  
这篇文章主要为大家详细介绍了javascript瀑布流式图片懒加载实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近项目使用到了“懒加载”,现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。

代码如下:

/**
 * Created by zhiqiang on 2015/10/14.
 * hpuhouzhiqiang@gmail.com
 * 图片的懒加载
 **/
function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),
 mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
 imgDataSrc, localUrl;

 localUrl = location.href;
 // 获取当前浏览器可视区域的高度
 mobileHeight = $(window).height();

 return function(co) {

 var conf = {
 'loadfirst': true,
 'loadimg': true
 };

 for (var item in conf) {
 if (item in co) {
 conf[item] = co[item];
 }
 }

 var that = {};
 var _this = {};
 /**
 * [replaceImgSrc 动态替换节点中的src]
 * @param {[type]} tempObject [description]
 * @return {[type]} [description]
 */
 _this.replaceImgSrc = function(tempObject) {
 var srcValue;

 $.each(tempObject, function(i, item) {
 imgObject = $(item).find('img[data-lazysrc]');
 imgObject.each(function(i) {
  imgDataSrc = $(this).attr('data-lazysrc');
  srcValue = $(this).attr('src');
  if (srcValue == '#') {
  if (imgDataSrc) {
  $(this).attr('src', imgDataSrc);
  $(this).removeAttr('data-lazysrc');
  }
  }
 });
 });
 };

 /**
 * 首屏判断屏幕上是否出现imglazy节点,有的话就加载图片
 * @param {[type]} i) {  currentNodeTop [description]
 * @return {[type]} [description]
 */
 _this.loadFirstScreen = function() {
 if (conf.loadfirst) {
 lazyNode.each(function(i) {
  currentNodeTop = $(this).offset().top;
  if (currentNodeTop < mobileHeight + 800) {
  _this.replaceImgSrc($(this));
  }
 });
 }
 };

 //当加载过首屏以后按照队列加载图片
 _this.loadImg = function() {
 if (conf.loadimg) {
 $(window).on('scroll', function() {
  var imgLazyList = $('[node-type=imglazy]', node);
  for (var i = 0; i < 5; i++) {
  _this.replaceImgSrc(imgLazyList.eq(i));
  }
 });
 }
 };

 that = {
 replaceImgSrc: _this.replaceImgSrc(),
 mobileHeight: mobileHeight,
 objIsEmpty: function(obj) {
 for (var item in obj) {
  return false;
 }
 return true;
 },
 destory: function() {
 if (_this) {
  $.each(_this, function(i, item) {
  if (item && item.destory) {
  item.destory();
  }
  });
  _this = null;
 }
 $(window).off('scroll');
 }
 };
 return that;
 };
}

希望本文对大家学习javascript图片懒加载有所帮助。

相关文章

  • JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)

    JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)

    这篇文章主要是对JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • js实现可爱的气泡特效

    js实现可爱的气泡特效

    这篇文章主要为大家详细介绍了js实现可爱的气泡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js实现飞机大战游戏

    js实现飞机大战游戏

    这篇文章主要为大家详细介绍了js实现飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JavaScript实现手写promise的示例代码

    JavaScript实现手写promise的示例代码

    promise 作为前端开发中常用的函数,解决了 js 处理异步时回调地狱的问题,大家应该也不陌生了,今天来学习一下 promise 的实现过程吧
    2023-04-04
  • 重写document.write实现无阻塞加载js广告(补充)

    重写document.write实现无阻塞加载js广告(补充)

    这篇文章主要介绍了重写document.write实现无阻塞加载js广告,需要的朋友可以参考下
    2014-12-12
  • 获取JS中网页各种高宽与位置的方法总结

    获取JS中网页各种高宽与位置的方法总结

    本文详细罗列了如何在javascript获取网页各种高宽及位置,内容比较全面,有需要的可以参考一下。
    2016-07-07
  • JavaScript优化专题之Loading and Execution加载和运行

    JavaScript优化专题之Loading and Execution加载和运行

    这篇文章主要介绍了JavaScript优化专题中Loading and Execution加载和运行的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 深入浅析Bootstrap列表组组件

    深入浅析Bootstrap列表组组件

    列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件,感兴趣的朋友一起学习吧
    2016-05-05
  • JS重学系列之聊聊new操作符

    JS重学系列之聊聊new操作符

    这篇文章主要给大家介绍了关于JS重学系列之new操作符的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • CocosCreator经典入门项目之flappybird

    CocosCreator经典入门项目之flappybird

    这篇文章主要介绍了CocosCreator经典入门项目之flappybird,详细说明了制作的每个步骤,还有详尽的代码,对CocosCreator感兴趣的同学,一定要看一下
    2021-04-04

最新评论