zoukankan      html  css  js  c++  java
  • window onload 与 img onload事件

    window onload 与 img onload事件

    通常,window.onload就是载入完dom之后运行的。

    而img就是载入完图片完运行它的onload事件。依据img的src是否载入完毕。


    因此。看以下代码:

    <!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>window onload与img onload</title> 
    <script type='text/javascript'> 
    window.onload = function(){ 
    	var img = document.getElementById('img1'); 
    	//var src = img.getAttribute('src'); 
    	//img.setAttribute('src','');
    	img.onload = function(){
    		alert(1); 
    	}; 
    	//img.setAttribute('src',src);
    }; 
    </script> 
    </head> 
    <body> 
    <img src='6.png' id='img1'/> 
    </body> 
    </html>
    注:上面的6.png自己找图片替换上。


    上面代码将不会弹出1。由于window.onload已经包含图片的onload了。而图片的onload是监听img的src是否载入完毕。去掉凝视就可以弹出1,不可弹出1的可能你的图片找不到。scr没有载入完毕。因此没有弹出1.


    ps:img的onload事件也可灵活应用,像一些特殊业务需求的。无法追加window.onload事件等,而考虑採用img的onload事件,如载入一张小图片,做隐藏处理。里面调用onload事件。



  • 相关阅读:
    4种排序实践
    redis 应用场景和数据类型
    建立三个线程,A线程打印10次A,B线程打印10次B,C线程打印10次C
    分布式线程安全(redis、zookeeper、数据库)
    [专项]3道改错题
    kafka 业务埋点
    spring boot集成kafka
    kafka本地调试
    C语言 gets()和scanf()函数的区别
    EOF
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/6785060.html
Copyright © 2011-2022 走看看