js如何判断页面是否加载完成啊

吉他猪 2012-07-28 08:35:55

如题包括所有的图片和flash全部加载完成以后才让一个不可用的按钮恢复可用

...全文

10659 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

该昵称已被占用咯 2013-12-10

打赏
举报

不错还是能学到

吉他猪 2012-07-29

打赏
举报

非常感谢，能不能提供一个比较详细的jquery手册啊，我这里就一个中文文档不是很全，你上面说的readyState属性和值都没有介绍

MiceRice 2012-07-29

打赏
举报

[Quote=引用 5 楼的回复:]
jquery有方法验证图片是否加载完成吗
[/Quote]

jQuery本身没有，jQuery用于快捷的便利所有 img 标签。

img标签对象，有一个属性，叫做：readyState，取值如下：
uninitialized: Object is not initialized with data.
loading: Object is loading its data.
loaded: Object has finished loading its data.
interactive: User can interact with the object even though it is not fully loaded.
complete: Object is completely initialized.

检测主要靠这个，类似于：
counter = 0;
$("img").each(function(){
if (this.readyState==loaded || this.readyState==complete) counter++;
});
if (counter >= 10) alert("所有图片装载完毕！");

另一种做法，是给所有<img>增加onload事件，在onload事件中，给计数器做累加，达到一定数量则判定为全部图片装载完毕

吉他猪 2012-07-29

打赏
举报

jquery有方法验证图片是否加载完成吗

吉他猪 2012-07-29

打赏
举报

onload还是当DOM对象全部加在完后才之行的吧，但是不能验证图片加载是否完成

吉他猪 2012-07-29

打赏
举报

算了不搞了，知道怎么判断就差不过了，本来一共是要显示最多64张图的，我就去判断显示大于55就算全部加载完成了，取个大概吧也不用太准确了，谢谢了，

吉他猪 2012-07-29

打赏
举报

有办法判断图片失败也算加载完成吗显示X也算在count中

MiceRice 2012-07-29

打赏
举报

是的。

其实。。。真没见过有这种需求的。。。

如果某张图片特别重要，必须显示出来，可以仅为那张图片<img>增加 onload 事件。

吉他猪 2012-07-29

打赏
举报

嗯，还真是不好办哦，还需要定时去检查这种基于所有页面内容装载完成后再做其他操作的应用多吗

MiceRice 2012-07-29

打赏
举报

要用 window.setInterval 定时去检测下，检测完毕后要删除该定时器。

div 没有 onload 事件。

吉他猪 2012-07-29

打赏
举报

谢谢，还有个问题



$(function()

{

   $("#query").click(function()

   {

      $("#main").empty();

      this.disabled = true;

      $.post("QueryImageServlet",

      {

         keyword:$("#keyword").val(),

	 picSource: $("input[name=picSource]:checked").val()

      },function(respData)

      {

         var html = "";

	 var count = 0;

	 for(var i=0;i<respData.length;i++) {

	     html += "<img src='" + respData[i] +"' width='200px' height='200px'/>";

	 };

	 $("#main").append($(html));

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

	 $("#main img").each(function(){

	    if(this.readyState == "loaded" || this.readyState == "complete")   

               count++; 

	 });

	 alert(count);

	 if(count == respData.length) {

	    $("#query")[0].disabled = false;

	 }

      });

    });

    $("#main").hide();

});



<div id="header">

     <input type="text" id="keyword" size="40"/>   <input type="button" value="Submit" id="query"> 

     <input type="button" value="Save" width="40px" id="download"/>  

     <input type="radio" name="picSource" value="google" checked><font size="5px">Google</font> <input type="radio" name="picSource" value="flickr"><font size="5px">Flickr</font>

  </div>

  <div id="main">

这里一显示maindiv我就去判断img是否加载完成，此时img都是未装载完成的所有count都是0，那什么时候去判断img是否装载完成了，div未上是否也可以用onload来判断里面内容是否装载成功？

MiceRice 2012-07-29

打赏
举报

[Quote=引用 9 楼的回复:]
非常感谢，能不能提供一个比较详细的jquery手册啊，我这里就一个中文文档不是很全，你上面说的readyState属性和值都没有介绍
[/Quote]
http://download.csdn.net/detail/ldh911/4187933
下载后记得评论，把1分挣回来，别浪费了。

[Quote=引用 9 楼的回复:]
错了。readystate是dom对象的属性哦
[/Quote]
当然是 dom 对象属性，<img> 就是个dom对象。。。

吉他猪 2012-07-29

打赏
举报

错了。readystate是dom对象的属性哦

吉他猪 2012-07-29

打赏
举报

找到了直接看官网的就可以了

msflwl 2012-07-28

打赏
举报

正解

[Quote=引用 2 楼的回复:]

<html>
<head>
<title></title>
<script>
window.onload=function(){
alert(1234);
};
</script>
</head>
<body></body>
</html>
[/Quote]