CODEWITHSUNDEEP
javascript
rufus1530
rufus1530

Reputation: 795

Error event listener doesn't execute function when page loads

I have a page that contains some report pictures. Under each image, there are 4 buttons that change the image's src when clicked. I've written a short script (imageValidation.js) that checks if the image has loaded successfully and if not, runs a function that changes images src to generic 'file not found' picture.

The problem is that I want the script to replace replace the 'broken' image srcs when the page load initially, which it doesn't. However, when I change the pictures by clicking on the buttons, the script works fine.

To give an example, I deleted the 01UR(All).jpeg. When the page loads I see generic broken picture icon. But when I click on the All Cycles button, the image changes to the ReportUnavailable.jpeg as desired.

I've tried executing the code in onload attribute in body section. Also tried moving the script tag to head and to the beginning of the body section.

How should it be done correctly?

Here's the 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>

The image validation script:

/*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';

}

Upvotes: 0

Views: 93

Answers (1)

Canolyb1
Canolyb1

Reputation: 724

I'm doing two things here. One after window.onload all images are checked and if they have a natrualWidth and naturalHeight of 0 then they are replaced. This should take care of any images that got loaded before the event got registered.

The Event listener is still registered and will be called for the cases where the image is changed. 

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";
	}
}
<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>

Upvotes: 1

Related Questions