The following code that deals with different loading states of images, how to optimize, or is there a better solution?

this code is used to determine the different loading states of the picture (from copy on the Internet).
shows loading animation,
displays pictures when loading is complete, and
shows failed pictures when loading fails.
excuse me, is there anything that needs to be optimized in this scheme to help me point out? if there is a better plan, please give me some advice. Thank you.

<html>
<title>jsloading</title>
<body>
    <style>
        img {
            float: left;
            width: 200px;
            height: 200px;
            margin: 0 10px 10px 0
        }
    </style>
    <script>
        //
        var Browser = new Object();
        Browser.userAgent = window.navigator.userAgent.toLowerCase();
        Browser.ie = /msie/.test(Browser.userAgent);
        Browser.Moz = /gecko/.test(Browser.userAgent);

        //
        function Imagess(url, imgid, callback) {
            var val = url;
            var img = new Image();
            if (Browser.ie) {
                img.onreadystatechange = function () {
                    if (img.readyState == "complete" || img.readyState == "loaded") {
                        callback(img, imgid);
                    }
                }
            } else if (Browser.Moz) {
                img.onload = function () {
                    if (img.complete == true) {
                        callback(img, imgid);
                        console.log(img.style, imgid);
                    }
                }
            }
            //
            img.onerror = function () {
                img.src = "https://img.codeshelper.com/upload/img/2021/11/24/wwrmra43blz1172.png"
            }
            img.src = val;
        }

        //
        function checkimg(obj, imgid) {
            document.getElementById(imgid).style.cssText = "";
            document.getElementById(imgid).src = obj.src;
        }
        //
        window.onload = function () {
            var imglist = document.getElementById("imagelist").getElementsByTagName("img");
            for (i = 0; i < imglist.length; iPP) {
                imglist[i].id = "img0" + i;
                imglist[i].style = "background:url(loading.gif) no-repeat center center;";
                // console.log(imglist[i].getAttribute("data"),imglist[i].id,checkimg);
                Imagess(imglist[i].getAttribute("data"), imglist[i].id, checkimg);
            }
        }
    </script>
    <div id="imagelist">
        <img data="https://img.codeshelper.com/upload/img/2021/11/24/seppycl0sej1173.jpg" />
        <img data="https://img.codeshelper.com/upload/img/2021/11/24/ld0oit3f5gj1174.jpg" />
        <img data="https://img.codeshelper.com/upload/img/2021/11/24/23epw151gmf1175.jpg" />
        <img data="https://img.codeshelper.com/upload/img/2021/11/24/sdcpnfr0nhb1176.jpg" />
        <img data="https://img.codeshelper.com/upload/img/2021/11/24/u4n5zhfi3k11177.jpg" />
    </div>
</body>

</html>