<script type="text/javascript">
$(function(){
var $winH = $(window).height();//获取窗口高度
var $img = $("#show img");
var $imgH = parseInt($img.height()/2);//图片到一半的时候显示
var $srcDef = "a.gif";
runing();//页面刚载入时判断要显示的图片
$(window).scroll(function(){
runing();//滚动刷新
})
function runing(){
$img.each(function(i){//遍历img
var $src = $img.eq(i).attr("original");//获取当前img URL地址
var $scroTop = $img.eq(i).offset();//获取图片位置
if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH){//判断窗口至上往下的位置
if($img.eq(i).attr("src") == $srcDef){
$img.eq(i).hide();
}
$img.eq(i).attr("src",function(){return $src}).fadeIn(300);//元素属性交换
}
})
}
})
</script>
jQuery延迟加载图片,只加载当前屏幕的图片,当用到图片时才加载
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会...
- 以前用过几次,今天又看到了就整理了下来。 插件在用户滚动页面到图片之后才进行加载,对于有较多的图片的网页, 使用图...
- 本贴纯属借鉴大神之作,请各位勿喷,嘿嘿 首先调用jQuery库文件,还有jquery.scrollLoading....
- 2016年还有不到一只手就能数完的天数了, 天天剁手的你如果还有手指头可以数, 那你一定是千手观音~ 还记得这一年...