如何判断从服务端请求回来的图片是否加载完成如何判断从服务端请求回来的图片是否加载完成------------------

方法一：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络状态</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .home{
            text-align: center;
        }
        img{
            width: 80px;
            height: 80px;
        }

    </style>
</head>
<body>
    <!-- <img id="img" src="./1660894081892.jpg" alt="">
    <p id="p">loading...</p> -->

    <img onerror='reSetImgUrl(this,this.src,3)' src="http://" alt="">

    <!-- 需求：从服务端加载的图片，前端如何判断这个图片已经加载完成了？（业务功能遇到的问题）-->

    <script type="text/javascript">
        // 方法一：为了提高用户体验，如果加载的图片是一个外链的url，加载图片的时候如果加载失败，我需要进行重试，我可以定义重试的次数
        function reSetImgUrl(imgObj,imgSrc,maxErrorNum){
            console.log('重试次数',maxErrorNum);
            if(maxErrorNum > 0){
                imgObj.onerror = function(){
                    reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);
                };
                setTimeout(function(){
                    imgObj.src = imgSrc;
                },500);
            }else{
                imgObj.onerror = null;
                imgObj.src = 'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500'
            }
        }

    </script>
    
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络状态</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .home{
            text-align: center;
        }
        img{
            width: 80px;
            height: 80px;
        }

    </style>
</head>
<body>
    <img id="img" src="./1660894081892.jpg" alt="">
    <p id="p">loading...</p>

    <!-- 需求：从服务端加载的图片，前端如何判断这个图片已经加载完成了？ -->

    <script type="text/javascript">
        // 方法二：对于图片元素，它有一个onload函数，这个onload函数里面就可以判断它是否已经加载完成
        let img = document.getElementById('img');
        let p = document.getElementById('p');
        img.onload = function(){
            p.innerHTML = '加载完毕'
        }
    </script>
    
</body>
</html>

方法三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络状态</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .home{
            text-align: center;
        }
        img{
            width: 80px;
            height: 80px;
        }

    </style>
</head>
<body>
    <img id="img" src="./1660894081892.jpg" alt="">
    <p id="p">loading...</p>

    <!-- 需求：从服务端加载的图片，前端如何判断这个图片已经加载完成了？ -->

    <script type="text/javascript">
        // 方法三：图片上有一个属性complete，图片完全加载完成的时候complete的属性值是true，使用轮循的方式进行判断
        let img = document.getElementById('img');
        let p = document.getElementById('p');
        function imgLoad(img,callback){
            var timer = setInterval(function(){
                console.log('img.complete--->',img.complete);
                if(img.complete){ // 当图片完全加载完成时值为true，否则，值为false
                    callback();
                    if(timer){
                        clearInterval(timer); // 记得清除定时器
                    }
                }
            },50)
        }
        imgLoad(img,function(){
            p.innerHTML = '加载完毕'
        })

    </script>
    
</body>
</html>