当jsp页面完全加载完成后执行一个js函数

最新推荐文章于 2024-05-08 18:25:35 发布

dingjingchao

最新推荐文章于 2024-05-08 18:25:35 发布

阅读量3.1w

点赞数 2

分类专栏：学习笔记

学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

document.onreadystatechange = function() {
if (document.readyState == "complete") {

}

}

window.οnlοad=function() :

一般来说比如有一个alt(){alter("Welcome!);}函数，想在页面一打开就调用alt()函数弹框提示欢迎，我们可以写成 windows.οnlοad=alt;而写成windows.οnlοad=functon() 这完全点应该是windows.οnlοad=function(){//方法体},这里应该是一个空的函数，表示初始化不做任何操作，

在做页面的时候,经常碰到要在页面加载完全之后再去展现。这时候我们会直接想到使用window.onload的方式,或者是采用Jquery的ready方法判断,这在一定程度可以搞定。

window.onload方式

window.onload =function()
{
    //your code  
}

Jquery的ready方法

//: 判断网页是否加载完成     
           document.onreadystatechange = function () {      
               if(document.readyState=="complete") {            
                   document.getElementById('divprogressbar').style.display='none';      
               }     
           }

;(function($,undefined){
    $(function(){
    //your code
    });
})(window.jQuery);

但是上面的方法只能判断Dom的加载状态,不能判断图片是否加载成功。如果碰到页面需要图片加载完成才能展现的情况,我们就无法搞定了。

现提供两种方式判断图片是否加载完成。

使用onload的图片加载事件检测

这里是使用onload和onerror检测判断,但是有时候不能检测到图片是否加载完成,再使用过程中,我发现它只是判断所有图片开始加载时就触发了,不过基本可以满足需求。

使用complete的图片属性检测

这里我们采用定时器不断检测图片的complete属性,这个比较完美,只有图片确实加载完成时,才会变成真,所以比较可靠,建议采用。

参考出处：http://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html

====================================================================

在网上有很多关于判断图片是否已经加载完毕的文章，但是有的浏览器并不适合，下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总，具体内容如下所示：

一.onload事件

通过监听图片的onload事件，可以判断图片是否已经加载完成，兼容所有的浏览器（w3c推荐方法），代码示例如下

 
         <!DOCTYPE html> 
        
         <html lang= 
         "en" 
         > 
        
         <head> 
        
         <meta charset= 
         "UTF-8" 
         > 
        
         <title>Document</title> 
        
         </head> 
        
         <body> 
        
         <img id= 
         "img1"  
         src= 
         "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"  
         alt= 
         "" 
         > 
        
         <script> 
        
         // 方法一：图片已经下载完 
        
         document.getElementById( 
         'img1' 
         ).onload =  
         function 
         (e){ 
        
         e.stopPropagation(); 
        
         alert(1); 
        
         } 
        
         </script> 
        
         </body> 
        
         </html>

二.判断img对象（DOM）的complete属性

当img加载完成之后，complete对象属性将变为true，代码示例如下：

 
         <!DOCTYPE html> 
        
         <html lang= 
         "en" 
         > 
        
         <head> 
        
         <meta charset= 
         "UTF-8" 
         > 
        
         <title>Document</title> 
        
         </head> 
        
         <body> 
        
         <img id= 
         "img1"  
         src= 
         "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"  
         alt= 
         "" 
         > 
        
         <script> 
        
         // 方法二：img的complate属性 
        
         var  
         timer = setInterval( 
         function 
         (){ 
        
         if  
         (document.getElementById( 
         'img1' 
         ).complete){ 
        
         clearInterval(timer); 
        
         alert(1); 
        
         console.log(document.getElementById( 
         'img1' 
         ).complete) 
        
         } 
        
         }, 10); 
        
         </script> 
        
         </body> 
        
         </html>

亲测该方法同样可兼容所有浏览器

三.onreadystatechange事件

在ie下，img对象与xhr对象一样具有onreadystatechange事件，可以通郭建廷该事件判断图片是否加载完成，代码示例如下：

 
         <!DOCTYPE html> 
        
         <html lang= 
         "en" 
         > 
        
         <head> 
        
         <meta charset= 
         "UTF-8" 
         > 
        
         <title>Document</title> 
        
         </head> 
        
         <body> 
        
         <img id= 
         "img1"  
         src= 
         "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"  
         alt= 
         "" 
         > 
        
         <script> 
        
         document.getElementById( 
         'img1' 
         ).onreadystatechange =  
         function 
         () { 
        
         if 
         (document.getElementById( 
         'img1' 
         ).readyState== 
         "complete" 
         ||document.getElementById( 
         'img1' 
         ).readyState== 
         "loaded" 
         ){ 
        
         alert(1); 
        
         } 
        
         } 
        
         </script> 
        
         </body> 
        
         </html>