美文网首页
jQuery延迟加载图片,只加载当前屏幕的图片,当用到图片时才加

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

作者: LearningCoding | 来源:发表于2017-06-06 18:49 被阅读318次
<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延迟加载图片,只加载当前屏幕的图片,当用到图片时才加

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • js 实现图片懒加载

    一、懒加载 懒加载也叫延迟加载,Js中图片的延迟加载,延迟图片需要符合某些条件时才加载;对于图片过多的页面,为了加...

  • 懒加载和预加载

    1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载:提前加载图片...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 实现图片延迟加载插件lazyload

    jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可...

  • 图片懒加载 lazyLoad

    图片懒加载 图片的延迟加载最常见的是只加载网页显示在屏幕中的图片,如果用户没有滚动到网页靠下的部分,那图片就不用显...

  • 图片懒加载的几种方法

    在一些图片比较多的网站会用到 图片懒加载 技术,这项技术可以延迟加载图像,只当图片出现在我们看到的视图中才加载,它...

  • javascript图片懒加载与预加载的分析

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才...

  • 图片的懒加载和预加载

    懒加载:又称延迟加载,需要等到某个情况下才加载,相对可以缓解服务器压力。 实现原理:以懒加载图片为例,当加载图片较...

网友评论

      本文标题:jQuery延迟加载图片,只加载当前屏幕的图片,当用到图片时才加

      本文链接:https://www.haomeiwen.com/subject/ehdnfxtx.html