不用插件,教你如何用jquery来制作随滚动条滚动时延迟加载图片的特效推荐 亲测 原创

文章标签: 图片特效
  • :
  • 05-02 18:15
  • :
  • 13次
  • :
  • 0条
  • 1赞

简介本文教你如何用jquery来自己编写制作网页中,随滚动条滚动时,动态延迟加载图片的方法,并附有完整的在线实例演示。l

网上有很多延迟加载图片的插件,但如果我们的网页比较简单,那么我们需要延迟加载图片的功能时,不需要因为这么小的一个功能,就去加载一个特别“大”的插件,因为在jquery里,我们制作一个随滚动条的滚动来动态加载图片的功能是非常简单的。


本篇,站长就来教大家如何用jquery来写出“随滚动条延迟加载图片”的特效。


不喜欢看站长啰嗦的朋友,可以点下面的链接直接查看和拷贝站长做的一个在线实例演示:

jquery随滚动条延迟加载图片在线演示

首先,在刚加载页面时,要把网页里所有需要“延迟加载”的图片隐藏起来,让它们不要自动加载:

$("#aijquery img").each(function(){      
    var $this=$(this);      
    var src=$this.attr("src");      
    $this.attr("data-src",src).attr("src","");	    
});

这里,我们直接把图片的src地址隐藏了,您可以把它替换成一个等待图标的图片。

第二步,我们需要一个用来判断图片或其它元素是否“可见”的函数:

var CheckVisble=function(t,mh){	
    var mh=mh||0;			
    var top=t.offset().top-mh;			
    if(top >= $(window).scrollTop()) {				
        return true;			
    }else{				
        return false;			
    }		
}

上面函数中,mh可以设置一个数值,表示具体指定元素多少距离时就判断为可见,比如,我们要在图片离可视范围100像素时就开始加载图片,就把mh设置为100就行了。


第三步,编写动态加载图片的函数:

var Show=function(){      
    $("#aijquery img[data-src]").each(function(i){        
        var $this=$(this);        
        if(CheckVisble($this.parent())){          
            var src=$this.attr("data-src");          
            $this.attr("src",src).removeAttr("data-src");        
        }      
    });      
    if(!$("#aijquery img[data-src]")[0]){        
        $(window).off("scroll",Show);      
    };    
};

上面代码里,我们用的是“$this.parent()”来判断图片是否“可见”,因为我们直接替换了图片的src,所以用$(this)来判断的话,是判断不出来的,只能用图片的父元素来判断。


第四步,把事件绑定到window的scroll当中:

 $(window).on("scroll",Show);

当然,如果网页里所有的图片都显示出来后,要去除绑定的事件,这一步,站长直接写在第三步的代码里了。

好了,关于“jquery随滚动条动态加载图片”的特效就是这么简单,希望这篇文章能帮助到所有看到这篇 文章的朋友们,转载时请备注好,本文原创首发:爱jquery www.aijquery.cn



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-10-08 16:02:02