JavaScript Image onload 没有实际的 src 属性

我有一个简单的例子：

<head>
    <script>
        //
        function onLoadImgView() {
            //
            console.log(this.currentSrc);
        }
        //
        var i = 0;
        //
        document.addEventListener('DOMContentLoaded', function(event) {
            //
            document.getElementById('imgElement').src = "img.jpg?" + i;
            //
            document.getElementById('imgElement').onload = onLoadImgView;
        });
    </script>
</head>
<body>
    <img id="imgElement" src="img.jpg" width="100" height="100" alt="" />
</body>
</html>

我试图获取实际的图像 src 属性，但是，我在日志中看到它：

"sitename.com/img.jpg?0">

有时，我也会得到：

"sitename.com/img.jpg?0">
"sitename.com/img.jpg?0">

但是我怎样才能获得真实的日志呢？

因为它应该是这样的：

"sitename.com/img.jpg">
"sitename.com/img.jpg?0">

为什么 src 和 currentSrc 在加载中没有收到可以加载的有效文件名？

这是我的问题。谢谢。

附言我知道我可以将 src 保存在 DOMContentLoaded 函数中，然后在 onload 中返回它，但这也是不正确的，因为有时加载"img.jpg"会被跳过，并立即加载"img.jpg？0"。

尝试使用窗口事件侦听器和load事件。像这样：

var image = document.getElementById('imgElement');
var i = 0;
console.log(image.src);
window.addEventListener('load', function() {
  image.src = image.src + '?' + i;
  console.log(image.src);
});

<img id="imgElement" width="300px" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Henri-Edmond_Cross_-_The_Evening_Air_-_Google_Art_Project.jpg">

相关内容

最新更新

热门标签：