基于jQuery实现图片懒加载

图片懒加载即先加载一张较模糊的,体积较小的图片,等到滚动显示到该图片时替换为高清图片。
简易版本:

/* 
  @method: lazyload图片懒加载
  @params: 1. String 图片类名
           2. String 自定义标签名(值为待替换图片地址)
  @return: 懒加载执行函数
*/
(function(global, factory) {
  return factory.call(global, global.jQuery)
})(this, function($) {
  $.extend({
    lazyload: function (imgClass, userAttr) {
      return function () {
        if (!imgClass || !userAttr) {
          console.error('请传入图片类名和自定义标签名')
          return
        }
        var $imgs = $('.' + imgClass)
        var height = $(window).height() + $(window).scrollTop()
        for (var i = 0; i < $imgs.length; i++) {
          var $img = $($imgs[i])
          var top = $img.offset().top
          if (top <= height) {
            var newurl =$img.attr(userAttr)
            if (newurl) {
              $img.attr('src', newurl)
            } else {
              console.error('请在自定义标签上绑定新的图片url')
            }
          }
        }
      }
    }
  })
})

使用:timg1.jpeg为清晰度低的图片,img_url为自定义标签,值为清晰度高的图片地址




  
  
  
  Document



  

你可能感兴趣的:(javascript,前端)