多种方法实现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>

赞 (0)

相关推荐

  • 多种方法实现load加载完成后把图片一次性显示出来

    方法一: 复制代码 代码如下: <script type="text/javascript"> var obj = new Image(); obj.src = "yourpicurl.jpg"; obj.onload = function() { //这个地方可以重复写入,如果错误的话,换到外面即可 document.getElementById("mypic").innnerHTML = "<img src='&q

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • js判断图片加载完成后获取图片实际宽高的方法

    本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

  • Android将Glide动态加载不同大小的图片切圆角与圆形的方法

    Glide加载动态图片 首先我们先要去依赖一个githup:bumptech:glide:glide:3.7.0包: 使用Glide结合列表的样式进行图片加载: 1) 如果使用的是ListView,可以直接在Adapter的getView方法中使用: @Override public View getView(int position, View convertView, ViewGroup parent) { if (null == convertView) { //..... } Glide

  • 多种方法实现当jsp页面完全加载完成后执行一个js函数

    方法1:如下程序,当页面完全加载后执行openTheIndexPage()方法 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Telecommunications Data Collection System</title> <script t

  • JavaScript控制图片加载完成后调用回调函数的方法

    本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数. 复制代码 代码如下: function when_images_loaded($img_container, callback) { /* do callback when images in $img_container (jQuery object) are loaded. Only works when ALL ima

  • 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • 原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

    原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

    本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中保存了json数据之类的).要实现这样的功能,可以使用<script> 元素的load 事件(IE9+.chrome.FireFox等)和onreadystatechange 事件(IE8以下),直接上代码: function loadScript(src, callback) { var scr

  • JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)

    方法回调:callback方法回调是指当某方法执行完成后,去自动执行指定的另一方法的过程.下面举两个代表性的例子,说说JS世界里的方法回调. 一 对JS脚本文件动态加载,当加载完成后,去回调一个函数 复制代码 代码如下: <script> /* js动态加载脚本库方法 */ function include_js(file) { var _doc = document.getElementsByTagName('head')[0]; var js = document.createElemen

  • jQuery实现在HTML文档加载完毕后自动执行某个事件的方法

    本文实例讲述了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法.分享给大家供大家参考,具体如下: 原来onchange="fucntionname(parms)": <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border

随机推荐