• jQuery学习：onload和read区别（时间早晚 监听个数）

    1. 	$(document).ready(function(){//文档加载完成
    2. 				
    3. 			})
    1. 			//简写
    2. 			$(function(){
    3. 				
    4. 			})
    1. 			window.onload=function(){
    2. 				
    3. 			}

    3种方式只有onload找到了 

    1. 			//直接打印
    2. 			console.log('直接',$('#logo').width());
    3. 			window.onload=function(){
    4. 				console.log('onload',$('#logo').width());
    5. 			}
    6. 			//简写
    7. 			$(function(){
    8. 					console.log('ready',$('#logo').width());
    9. 			})

     

    需要清除缓存   再次刷新

     

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/jquery-3.6.1.js"">script>
    7.  
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<img id="logo" src="https://ts3.cn.mm.bing.net/th?id=OIP-C.-twYpD0GhflEq-oFA4ksFgHaK0&w=206&h=302&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="网上的图片">
    12. 		<script>
    13. 			// 直接打印
    14. 			console.log('直接',$('#logo').width());
    15. 			window.onload=function(){
    16. 				//等所有数据加载完成才会执行
    17. 				console.log('onload',$('#logo').width());
    18. 			}
    19. 			//简写
    20. 			$(function(){
    21. 					console.log('ready',$('#logo').width());
    22. 			})
    23. 			// //针对对某张图片
    24. 			$('#logo').on('load',function(){
    25. 				console.log('img load',$(this).width());//图片加载完成绑定的监听
    26. 			})
    27. 		script>
    28. body>
    29. html>

     说明： 

       window.onload

            包括页面的图片加载完成后才会回调

            只能有一个监听回调（只有一个）

       $(doucment).ready()===$(function(){})

            页面加载完成后（不管图片）就回调（早）

            可以监听有多个监听回调（可以多个）

    1. 		
    2. 		<img id="logo" src="https://ts3.cn.mm.bing.net/th?id=OIP-C.-twYpD0GhflEq-oFA4ksFgHaK0&w=206&h=302&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="网上的图片">
    3. 		<script>
    4. 			// 直接打印
    5. 			console.log('直接',$('#logo').width());
    6. 			window.onload=function(){
    7. 				//等所有数据加载完成才会执行
    8. 				console.log('onload',$('#logo').width());
    9. 			}
    10. 			window.onload=function(){
    11. 				//等所有数据加载完成才会执行
    12. 				console.log('onload2',$('#logo').width());
    13. 			}
    14. 			//简写
    15. 			$(function(){
    16. 					console.log('ready1',$('#logo').width());
    17. 			})
    18. 			$(function(){
    19. 					console.log('ready2',$('#logo').width());
    20. 			})
    21. 			// //针对对某张图片
    22. 			$('#logo').on('load',function(){
    23. 				console.log('img load',$(this).width());//图片加载完成绑定的监听
    24. 			})
    25. 		script>

     

  • 相关阅读:
    【JavaEE精炼宝库】网络原理基础——UDP详解
    虚拟IP技术
    利用ChatGPT练习口语
    接口自动化中如何完成接口加密与解密？
    联表查询之交叉连接、内、外连接
    Linux Mint大动作：全新设计Software Manager，大幅提升用户体验
    jenkins 安装以及自动构建maven项目并且运行
    JDK中内嵌JS引擎介绍及使用
    LeetCode买卖股票之一：基本套路(122)
    建木持续集成平台v2.5.0发布
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/127859447