您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页jQuery延迟加载图片,只加载当前屏幕的图片,当用到图片时才加

jQuery延迟加载图片,只加载当前屏幕的图片,当用到图片时才加

来源:二三四教育网
<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>

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务