如何创建 JavaScript 回调以了解图像是否已加载？

任务是知道是否使用 JavaScript 回调方法加载了图像。请参阅 JavaScript 回调。

方法 1：通过使用.complete属性。

HTML

  

    
        Create a JavaScript callback for
        knowing if an image is loaded
    
  
    
        #sologo {
            height: 100%;
            width: 100%;
        }
    

  

  
    
  
    
        let img = document.querySelector('img')
  
        function loaded() {
            alert('loaded')
        }
  
        if (img.complete) {
            loaded()
        } else {
            img.addEventListener('load', loaded)
            img.addEventListener('error', function () {
                alert('error')
            })
        }
    

  

输出：

注意：此程序将使用 img元素的 .complete属性不断检查图像是否已加载。它还会检查错误。当图像被加载时，它会用“已加载”警报消息框发出警报。

方法二：使用image.onload()方法

HTML

  

    
        Create a JavaScript callback for
        knowing if an image is loaded
    
  
    
        #sologo {
            height: 100%;
            width: 100%;
        }
    

  

    
  
    
        window.onload = function () {
  
            let logo = document.getElementById('sologo');
  
            logo.onload = function () {
                alert("loaded");
            };
  
            setTimeout(function () {
                logo.src = 
'https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png';
            }, 5000);
        };
    

  

输出：

注意：在这个方法中， Image.onload()会持续检查图像是否被加载。如果图像未在 5 秒内加载，它将超时并显示错误。如果图像在一段时间后加载，它会提示消息“图像已加载”。