Question

我有一个包含一些报告图片的页面。在每个图像下，有4个按钮可在单击时更改图像的src。我写了一个简短的脚本（ imageValidation.js ）来检查图像是否已成功加载，如果没有，则运行一个将图像src更改为通用“文件未找到”图片的函数。

问题在于我希望脚本在最初加载页面时替换“已损坏”的图像srcs，而不是。但是，当我通过单击按钮更改图片时，脚本工作正常。

举个例子，我删除了 01UR（全部）.jpeg 。当页面加载时，我看到通用的破碎图片图标。但是，当我点击所有周期按钮时，图片会根据需要更改为 ReportUnavailable.jpeg 。

我尝试在body部分的 onload 属性中执行代码。还尝试将脚本标记移动到头部和主体部分的开头。

如何正确完成？

这是HTML：

<body>    
<div>
    <img id="UR_chart" class="Reportpicture" src="reports/01UR(All).jpeg" />
</div>
<div class="submenu">
    <button id="UR_all" onclick="changeChart('UR_chart', 'reports/01UR(All).jpeg')">
        All Cycles
    </button>
    <button id="UR_c1" onclick="changeChart('UR_chart', 'reports/01UR(C1).jpeg')">
        Cycle 1
    </button>
    <button id="UR_c2" onclick="changeChart('UR_chart', 'reports/01UR(C2).jpeg')">
        Cycle 2
    </button>
    <button id="UR_c3" onclick="changeChart('UR_chart', 'reports/01UR(C3).jpeg')">
        Cycle 3
    </button>
</div>

<!-- more divs -->

<script src="../Scripts/imageValidation.js"></script>
</body>

图片验证脚本：

/*imageValidation.js*/ 
var reportPix = document.getElementsByClassName("Reportpicture");

for(var i = 0; i < reportPix.length; i++)
{
    reportPix[i].addEventListener("error", noImageFound);
}

function noImageFound()
{
    this.src = 'ReportUnavailable.jpeg';

}

Answer 1

我在这做两件事。一个在window.onload之后检查所有图像，如果它们具有natrualWidth和naturalHeight为0，则它们被替换。这应该照顾在事件登记之前加载的任何图像。

事件监听器仍然已注册，将在更改映像的情况下调用。

＆＃13;

function changeChart() {
	reportPix[0].src = "blank1.gif";

}
window.onload = checkImages;

var reportPix = document.getElementsByClassName("Reportpicture");
for(var i = 0; i < reportPix.length; i++) {
		reportPix[i].addEventListener("error", noImageFound);
}

function checkImages() {
	for(var i = 0; i < reportPix.length; i++) {
		if (reportPix[i].naturalHeight === 0 && reportPix[i].naturalWidth === 0) {
			noImageFound(reportPix[i]);
		}
	}
}

function noImageFound(obj) {
	if (obj.target) {
		obj.target.src = "https://img.clipartfest.com/cee7c57a2d96b3117b12d85fc6b6d6fc_photo-not-available-large-picture-not-available-clipart_325-384.png";
	} else {
		obj.src = "https://img.clipartfest.com/cee7c57a2d96b3117b12d85fc6b6d6fc_photo-not-available-large-picture-not-available-clipart_325-384.png";
	}
}

＆＃13;

<div>
    <img id="UR_chart" class="Reportpicture" src="reports/01UR(All).jpeg" />
</div>
<div class="submenu">
    <button id="UR_all" onclick="changeChart('UR_chart', 'reports/01UR(All).jpeg')">
        All Cycles
    </button>
    <button id="UR_c1" onclick="changeChart('UR_chart', 'reports/01UR(C1).jpeg')">
        Cycle 1
    </button>
    <button id="UR_c2" onclick="changeChart('UR_chart', 'reports/01UR(C2).jpeg')">
        Cycle 2
    </button>
    <button id="UR_c3" onclick="changeChart('UR_chart', 'reports/01UR(C3).jpeg')">
        Cycle 3
    </button>
</div>

＆＃13;

页面加载时，错误事件侦听器不执行函数

1 个答案: