zoukankan      html  css  js  c++  java
  • 修改版zhanyouwei/m-lazy支持图片做背景的元素

     添加对元素tagName判断,若不是img元素怎把图片链接设置成background-image: url("图片地址")

    /**
     * @author: Jason.占友伟 zhanyouwei@icloud.com
     * Created on 16/3/21.
     */
    
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(function () {
          return factory(root);
        });
      } else if (typeof exports === 'object') {
        module.exports = factory;
      } else {
        root.mlazy = factory(root);
      }
    })(window, function (root) {
    
      'use strict';
    
      var imgList = [],  // 页面所有img元素集合
        delay,   // setTimeout 对象
        offset,  //偏移量,用于指定图片距离可视区域多少距离,进行加载
        lazyTime,  // 延迟载入时间
        _selector; // 选择器 默认为 .m-lazyload
    
      function _isShow(el) {
        var coords = el.getBoundingClientRect();
        return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (root.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
      }
    
      function _loadImage() {
        for (var i = imgList.length; i--;) {
          var el = imgList[i];
          if (_isShow(el)) {
            var src = el.getAttribute('data-src');
            if ('img' === el.tagName.toLowerCase()) {
              el.src = src;
            } else {
              el.style.backgroundImage = 'url(' + src + ')';
            }
            el.className = el.className.replace(new RegExp('(\s|^)' + _selector.substring(1, _selector.length) + '(\s|$)'), ' ');
            imgList.splice(i, 1);
          }
        }
      }
    
      function _delay() {
        clearTimeout(delay);
        delay = setTimeout(function () {
          _loadImage();
        }, lazyTime);
      }
    
      function mlazy(selector, options) {
        var defaults = options || {};
        offset = defaults.offset || 100;
        lazyTime = defaults.lazyTime || 100;
        _selector = selector || '.m-lazyload';
        this.getNode();
        _delay();//避免首次加载未触发touch事件,主动触发一次加载函数
        if (defaults.iScroll) {
          defaults.iScroll.on('scrollEnd', _delay);
        } else {
          root.addEventListener('scroll', _delay, false);
        }
      }
    
      mlazy.prototype.getNode = function () {
        imgList = [];
        var nodes = document.querySelectorAll(_selector);
        for (var i = 0, l = nodes.length; i < l; i++) {
          imgList.push(nodes[i]);
        }
      };
    
      return mlazy;
    });
  • 相关阅读:
    正则表达式语法学习
    微软开放WP开发者回复用户应用评论功能
    下载安全程序需谨慎 黑客盯上XP用户
    软件业进入由大变强关键期
    54%的恶意程序无法被检测出
    CSS:第1课
    Javascript疑问【长期更新】
    不同语言的注释【长期更新】
    定制博客CSS样式
    认识Html DOM
  • 原文地址:https://www.cnblogs.com/Koming/p/10001302.html
Copyright © 2011-2022 走看看