JavaScript Image onload 没有实际的 src 属性答案

【问题标题】：JavaScript Image onload have no actual src propertyJavaScript Image onload 没有实际的 src 属性
【发布时间】：2018-01-26 10:34:31
【问题描述】：

我有一个简单的例子：

<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>

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

"sitename.com/img.jpg?0"

有时，我也得到：

"sitename.com/img.jpg?0"

"sitename.com/img.jpg?0"

但是我怎样才能得到一个真正的日志呢？

因为它应该是这样的：

“网站名称.com/img.jpg”

"sitename.com/img.jpg?0"

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

这是我的问题。谢谢。

P。 S. 我知道我可以将 src 保存在 DOMContentLoaded 函数中，然后在 onload 中返回，但这也不正确，因为有时会跳过加载“img.jpg”，并立即加载“img.jpg?0”。

【问题讨论】：

请求的图像版本是否已经在浏览器缓存中可能存在问题......如果是，当 DOMContentLoaded 触发时，它可能已经被认为是“完全加载”，所以 load 事件您当时附加到图像元素的处理程序将不再触发。
但这真的很有趣。为什么无法获取下载的文件名？

标签： javascript image onload src

【解决方案1】：

尝试使用窗口事件监听器和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);
});

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

【讨论】：

问题是onload中仍然没有正确的属性。解决方法。如果您将此代码写入普通页面，则会出现更多错误，因为无法设置图像 - DOM 未完全创建。