展会信息港展会大全

javascript实现load加载完成后把图片一次性显示出来
来源:互联网   发布日期:2016-01-28 12:58:49   浏览:1936次  

导读:如何一个load 加载完成后把图片一次性显示出来,下面有个不错的方法,希望对大家有所帮助方法一:复制代码 代码如下:script type=text javascriptvar obj = new Image();obj src = yourpicurl jpg;ob ...

如何一个load 加载完成后把图片一次性显示出来,下面有个不错的方法,希望对大家有所帮助

方法一:

复制代码 代码如下:

<script type= text/javascript >

var obj = new Image();

obj.src =yourpicurl.jpg ;

obj.onload = function() { //这个地方可以重复写入,如果错误的话,换到外面即可

document.getElementById( mypic ).innnerHTML =<img src=' +this.src+/> ;

}

</script>

<div id= mypic >onloading</div>

方法二:

代码如下:

<script type= text/javascript >

var obj = new Image();

obj.src =yourpicurl.jpg ;

obj.onreadystatechange = function() {

if ( this.readyState ==complete ) { //这个地方可以重复写入,如果错误的话,换到外面即可

document.getElementById( mypic ).innnerHTML =<img src=' +this.src+/> ;

}

}

</script>

<div id= mypic >onloading</div>

方法三:

代码如下:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<script language="javascript" src="/js/jquery-1.4.4.js" type="text/javascript">

</script>

<script language="javascript" type="text/javascript">

<!--//var total;var curt = 0;$(document).ready(function()

{

total = $("#content img").length;

$("#content img").each(function(){ var image = new Image();

image.src = $(this).attr('src');

if (image.complete){

imageLoaded();

}

else{

image.onload = imageLoaded;

}

});

});

function imageLoaded(){

curt+=1;

if(curt==total){

$("#content").show();

}}//-->

</script>

</head>

<body>

<div id="content" style="display:none;" >

<img src="" />

<img src="" />

<img src="" />

</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 图片 load 加载 javascript

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港