kn007的个人博客
♥ You are here: Home > > 简单实现图片Lazyload办法

简单实现图片Lazyload办法

by | 6 Comments

jquery-lazyload
添加如下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办法

donate
有所帮助?
Tags: , ,

Comments

6 Comments立即评论
Loading...
  1. 又拍云了还有必要用lazyload么

    1. MOD回复

      @小怪物: 我Lazyload那部分走服务器的。

    2. @kn007: 我这才刚用上又拍云,还是最近看到有活动才用上的。。

    3. MOD回复

      @小怪物: 哈哈,好吧 :mrgreen:

  2. 我就是来看看我的评论等级的。。。 :mrgreen:

    1. MOD回复

      @xinsenz: 还木有等级 :o

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif