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图片懒加载有所帮助。

相关文章

  • html中通过JS获取JSON数据并加载的方法

    html中通过JS获取JSON数据并加载的方法

    本篇内容主要给大家讲了如何通过javascript解析JSON并得到数据后添加到HTML中的方法,需要的朋友参考下。
    2017-11-11
  • 在Vue.js中使用Mock数据的详细教程与技巧

    在Vue.js中使用Mock数据的详细教程与技巧

    这篇文章主要介绍了在Vue.js项目中设置和使用Mock数据的方法,Mock数据在前端开发、单元测试和调试中非常有用,可以通过使用axios进行数据请求,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-12-12
  • Js实现京东无延迟菜单效果实例(demo)

    Js实现京东无延迟菜单效果实例(demo)

    本篇文章主要介绍了Js实现京东无延迟菜单效果实例(demo) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JavaScript中数据结构与算法(三):链表

    JavaScript中数据结构与算法(三):链表

    这篇文章主要介绍了JavaScript中数据结构与算法(三):链表,本文分别讲解了单链表与双链表以及增加节和删除节的代码实例,需要的朋友可以参考下
    2015-06-06
  • webpack配置打包后图片路径出错的解决

    webpack配置打包后图片路径出错的解决

    本篇文章主要介绍了webpack配置打包后图片路径出错的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Bootstrap表单Form全面解析

    Bootstrap表单Form全面解析

    在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的。下文给大家介绍Bootstrap表单Form全面解析,感兴趣的朋友一起看下吧
    2016-06-06
  • JSON.parse处理非标准Json数据出错的解决

    JSON.parse处理非标准Json数据出错的解决

    这篇文章主要介绍了JSON.parse处理非标准Json数据出错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • web性能优化之javascript性能调优

    web性能优化之javascript性能调优

    本文详细介绍Web 开发中关于性能方面需要注意的一些小细节,从 JavaScript 本身着手,介绍了 JavaScript 中需要避免的一些函数的使用和编程规则,比如 eval 的弊端,function scope chain 以及 String 的用法等等
    2012-12-12
  • JavaScript取得gridview中获取checkbox选中的值

    JavaScript取得gridview中获取checkbox选中的值

    这篇文章主要介绍了 js取得gridview中获取checkbox选中的值,本文给大家分享两段代码片段,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • 原生JS中slice()方法和splice()区别

    原生JS中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法。那么他两种有什么区别呢?今天通过本文教程给大家简单介绍下,需要的朋友可以参考下
    2017-03-03

最新评论