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

kevin-ying · 发表于 2015-8-12 23:10:55

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

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

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

第二步:

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

[javascript]

<pre name="code" class="javascript"><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></pre>
<pre></pre>
<p></p>
<pre></pre>
<p></p>

复制代码

第二种方法:

<!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>

复制代码

		自动登录	找回密码
密码			免费注册

[WEB前端] 先加载所有文字,最后加载图片的一个方法

本帖被以下淘专辑推荐:

相关帖子