先加载所有文字,最后加载图片的一个方法

第一步,先将所有需要最后加载的图片代码进行修改: (将src属性替换成thissrc)

例如:
<img src="/images/ad_1.jpg">

修改成: <img thissrc="/images/ad_1.jpg">

第二步:

将下面的代码放在页面最底部

<script language="javascript">

imgs = document.getElementsByTagName("img");
imgsnum = imgs.length;
for(imgi = 0 ;imgi < imgsnum;imgi++){
     if ((typeof(imgs[imgi].src) == 'undefined' || imgs[imgi].src =='') && imgs[imgi].getAttribute('thissrc') != null)
        imgs[imgi].src = imgs[imgi].getAttribute('thissrc');
}

</script>

第二种方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JS即时加载，当用到图片时才加载，只加载当前屏幕的图片 站长学院 代码特效</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    *{border:0;}
    a{display:inline;float:left;margin:55px;background:#ccc;overflow:hidden;font-size:0;}
    </style>
    <script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
    <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>
    </head>
    <body>
    预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。<br>
    <div id="show">
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s4.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s4.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s5.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s1.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s5.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s4.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s5.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s3.jpg"></a>
    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" width="160" height="160" original="/jscss/demoimg/wall_s2.jpg"></a>
    </div>
    </body>
    </html>

先加载所有文字,最后加载图片的一个方法

猜你喜欢