CODEWITHSUNDEEP
javascriptdom
Osama Bodiaf
Osama Bodiaf

Reputation: 109

How to remove a class from an element on an event added with addEventListener?

I'm trying to display images only after they load, using JavaScript.

I tried achieving that by adding a class (hidden) to them, then using addEventListener, the class is removed after they load.

Here is the code:

imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.add('hidden');
    imgs[i].addEventListener('load', this.classList.remove("hidden"));
}

After reloading the page, the first image disappears, which indicates that the class was added but something went wrong in the next line. In the console I get: Uncaught TypeError: Cannot read property 'remove' of undefined at that next line.

Upvotes: 0

Views: 3780

Answers (2)

mplungjan
mplungjan

Reputation: 178350

  1. You cannot add a load event listener to images already rendered unless it is inline `
  2. You cannot add a load event listener to images NOT already present - like a "future" event handler
  3. You CAN add the load event handler and then change the source:

// this code runs AFTER the data URI has loaded so it can be simple
document.querySelectorAll('img').forEach(function(img) {
  img.addEventListener('load', function() {
    this.classList.remove("hidden");
  });
  img.src = img.getAttribute("data-src");
});
.hidden {
  visibility: hidden;
}
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image1" class="hidden" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image2" class="hidden" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image3" class="hidden" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/468x60?text=Image4" class="hidden" />

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65845

As stated, you're not using .addEventListener correctly. Also, don't use getElementsByTagName() as it returns a live node list. Instead, use .querySelectorAll().

Below, 4 different resolutions of the same image are being referenced. You'll see the code working as intended.

imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('load', function(){ 
      this.classList.remove("hidden") 
    });
}
img { border:1px solid grey; width:75px; }
.hidden { visibility:hidden; }
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12710/web.jpg" class="hidden">
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12704/large_web.jpg" class="hidden">
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12707/print.jpg" class="hidden">
<img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/12702/full_jpg.jpg" class="hidden">

Upvotes: 0

Related Questions