简单实现图片Lazyload办法

提醒：本文最后更新于 3790 天前，文中所描述的信息可能已发生改变，请仔细核实。

添加如下js。在要使用Lazyload的图片，添加class="lazyload"，即可。实现效果：当页面可视范围存在图片时，加载图片。

jQuery(document).ready(function($) {
 function lazyload() {
  var oLazyload = $("img.lazyload"), fLazyload = function(hLazyload) {
  var nLazyload = $(window).height() + $(document).scrollTop();
  oLazyload.each(function() {
  $(this).offset().top < nLazyload && ($(this).trigger("appear"), oLazyload = oLazyload.not(this));
  }), 0 == oLazyload.length && $(window).unbind("scroll", fLazyload);
  };
  oLazyload.each(function() {
  $(this).one("appear", function() {
  $(this).attr("src", $(this).attr("data-original"));
  });
  }), $(window).bind("scroll", fLazyload), fLazyload();
 }
 lazyload();
});

转载请注明转自:kn007的个人博客的《简单实现图片Lazyload办法》