JavaScript：图片异步加载 onLoad函数

最新推荐文章于 2023-10-08 18:02:34 发布
最新推荐文章于 2023-10-08 18:02:34 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： 各种奇怪的网页效果 js基础 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ilovewangjie990502/article/details/119596047
版权

由于业务中有个需求，有个选项是让用户点击查看大图，这个大图应该带遮罩层显示在屏幕正中间，但是由于图片是挂载在服务器上的图片，所以加载图片是异步的，即图片并不能一次性加载完毕，这就导致图片即使加载完成，也无法实现屏幕居中。
后来发现可以在img标签里实现onLoad函数，当图片完毕后，让图片替换之前的默认图片。

<img src={
   imgLoading} onLoad={
   e => model.imageLoadHandler(e)}/>


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  温和些吧
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
imageLoader:图片预加载函数

				
			

			

				

					05-01
				

			

		

		

			
				
 - 可以选择异步加载图片，避免阻塞主线程，提高页面响应速度。  - 可以通过调整加载顺序，优先加载可视区域内的图片，降低对带宽的需求。  4. **注意事项**：  - 预加载可能会增加初始页面加载时间，因此应谨慎使用...

			
		

	



                

              
                



	

		

			

				
					
async-img:异步和惰性图像加载库

				
			

			

				

					05-16
				

			

		

		

			
				
异步图
异步和惰性图像加载库
演示版
初始化异步加载程序
 AsyncImage . new ( < selector> , < options> );
 selector -将被异步修饰的图像元素（有效的jQuery选择器）
 options
 binds -将在其上加载图像的事件数组
type字符串（ click ， mouseover ）
 target事件目标（有效的jQuery选择器）
 delay -毫秒事件的数目将被延迟（dafault： 0 ）
 throttle -每x毫秒最多触发一次事件（故障： 300 ）
 conditions -指定要加载图像的conditions对象
visible仅当元素未隐藏时才加载图像（默认值： false ）
 within_bounds仅当元素在视口内时才加载图像（默认值： false ）
 custom -回调用户定义的函数，返回

			
		

	



                


  
              

                


	

		

			

				
					
js的image onload事件使用遇到的问题

				
			

			

				

					12-12
				

			

		

		

			
				
关于 Image 对象 onload 事件。
想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。
但IE在第二次显示图片的时候，总是不走 onload 方法。代码：


var img = new Image();
img.src = "loading.gif";
img.onload = function(){
var iheight = img.height;
var iwidth = img.width;
};
后来给xiaoniu同学看了后才知，img.src 应该是放在 onload 方法后边的。。
后来google下，才发现原来此类问题大家多有总

			
		

	





	

		

			

				
					
canvas如何将image中onload异步请求变成同步

					
最新发布

				
			

			

				

					tq1711的博客
				

				

					10-08
					
					1793
					
				

			

		

		

			
				
为什么我们需要将image的onload加载事件变成同步请求呢？答案当然是图片加载完成后方便我们后续去做一些操作，不然我们想去做一些操作的时候，还需要到onload函数去操作。

			
		

	



		

			
		



	

		

			

				
					
JS实现图片的异步加载

					
热门推荐

				
			

			

				

					webnoob
				

				

					10-21
					
					1万+
					
				

			

		

		

			
				
1.概述异步加载：也称为图片的预加载。利用js代码提前加载图片，用户需要时可以直接从本地缓存获取，但是会增加服务器前端的压力。这样做可以提高用户的体验，因为同步加载大图片的时候，图片会一层一层的显示处理，但是经过预加载后，直接显示出整张图片。但是在图片响应时间上优化不是那么明显。2.基本形式<script>
        function loadImage(id,url,callback)

			
		

	





	

		

			

				
					
图片onload事件详解，兼容所有浏览器！

				
			

			

				

					weixin_30807779的博客
				

				

					06-20
					
					300
					
				

			

		

		

			
				
做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让 图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：function preLoadImg(url) {　　var img = new Image();　　img.src = url;}通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。实际...

			
		

	





	

		

			

				
					
img.onload知识点归纳总结

				
			

			

				

					ZLJ925的博客
				

				

					09-10
					
					9275
					
				

			

		

		

			
				
前言： 
在使用onload的时候，我们总是会看到各种建议，以及在不同浏览器上的不同表现，这些别人总结的经验都不是一蹴而就的，都是在不断的敲代码，不断的试错，测试，优化只有才从坑里爬出来的。只有在遇到不明白的地方，努力搞明白，动手敲几遍，知识才是自己的。个人愚见～_~,不废话了…先看一份代码：<body>
    <div class="box">
        <div> 1111</div>

			
		

	





	

		

			

				
					
JavaScript 中的图像加载事件

				
			

			

				

					six6de6的博客
				

				

					08-18
					
					2890
					
				

			

		

		

			
				
JavaScript 中的图像加载事件的简单解析

			
		

	





	

		

			

				
					
JS。某 image onload。

				
			

			

				

					hanyuxinting的专栏
				

				

					06-23
					
					4366
					
				

			

		

		

			
				
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候，总是不走 onload 方法。代码： var img = new Image();img.src = "loading.gif";img.onload = function(){var iheight

			
		

	





	

		

			

				
					
Javascript 文件的同步加载与异步加载

				
			

			

				

					soman的博客
				

				

					07-25
					
					2139
					
				

			

		

		

			
				
HTML 4.01 的script属性

charset: 可选。指定src引入代码的字符集，大多数浏览器忽略该值。
defer: boolean, 可选。延迟脚本执行，相当于将script标签放入页面body标签的底部，js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外，其他浏览器并未支持。
language: 已废弃。大部分浏览器

			
		

	





	

		

			

				
					
异步加载图片函数封装（使用Promise）

				
			

			

				

					雨的印记的博客
				

				

					12-27
					
					493
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
   

			
		

	





	

		

			

				
					
图片异步加载

				
			

			

				

					11-09
				

			

		

		

			
				
图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载图片异步加载

			
		

	





	

		

			

				
					
loadCSS：异步加载CSS

				
			

			

				

					02-28
				

			

		

		

			
				
 如有必要，此存储库还提供了一个单独的（和可选的）JavaScript函数，用于动态加载样式表。如何使用作为主要模式，我们建议从HTML加载这样的异步CSS： <link rel="stylesheet" href="/path/to/my.css" media=...

			
		

	





	

		

			

				
					
如何基于JavaScript判断图片是否加载完成

				
			

			

				

					10-15
				

			

		

		

			
				
我们可以将判断图片是否加载成功的逻辑放入`onload`事件的回调函数中，确保只有在图片真正加载完毕时才执行相关操作。  ```javascript let ImgObj = new Image(); ImgObj.onload = () => {  // 图片加载成功，执行...

			
		

	





	

		

			

				
					
异步加载图片示例.rar

				
			

			

				

					09-08
				

			

		

		

			
				
在现代Web开发中，异步加载图片是一种常见的优化策略，特别是在大数据量或者低带宽的网络环境下。ES6中的Promise是处理异步操作的重要工具，它使得代码更加可读、可维护，避免了传统的回调地狱问题。本示例将深入...

			
		

	





	

		

			

				
					
js-async-files-load:异步JS文件加载

				
			

			

				

					07-13
				

			

		

		

			
				
对于`js-async-files-load-master`这个项目，我们可以假设它包含了一个示例或库，用于演示或优化JavaScript异步加载文件的方法。可能包含了各种实现异步加载的代码片段、测试用例以及性能分析工具。通过研究这个项目...

			
		

	





	

		

			

				
					
html异步加载图片,js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)...

				
			

			

				

					weixin_30386401的博客
				

				

					06-05
					
					251
					
				

			

		

		

			
				
看个例子：当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？IE、Opera中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？FF、...

			
		

	





	

		

			

				
					
js实现img图片懒加载

				
			

			

				

					Wancc123的博客
				

				

					08-25
					
					494
					
				

			

		

		

			
				
当然，这只是一个简单的示例代码，实际开发中可能需要处理更多的细节和边界情况。同时，也可以借助第三方的 JavaScript 库来简化懒加载的实现。然后，通过监听滚动、窗口调整大小和屏幕旋转等事件，在合适的时机检查图片是否需要加载。如果图片已经进入可见区域内，就将。在前端中，可以使用 JavaScript 来实现图片的懒加载。上述代码首先在页面加载完成后获取所有带有。类名，触发图片加载。

			
		

	





	

		

			

				
					
Vue图片预加载

				
			

			

				

					A88552211的博客
				

				

					05-30
					
					3002
					
				

			

		

		

			
				
场景：切换下一个组件前，需要预加载图片，同时图片链接有中文，往往有时候缓存匹配问题，中文没匹配上。

上代码：


loadImg(list) {
  console.log('list', list);
  for(let i = 0; i < list.length; i++) {
    let img = new Image()
    let currentSrc = ''
    img.src = list[i]
    img.onload = function(e) {
      

			
		

	





	

		

			

				
					
vue 中 给 echarts 添加异步加载

				
			

			

				

					05-31
				

			

		

		

			
				
4. 在 mounted 钩子函数中，使用异步加载 Echarts：  ``` // 加载 Echarts 模块 loadEcharts(callback) {  let script = document.createElement('script');  script.type = 'text/javascript';  script.src = '...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值