Can I run an event when image has loaded using setAttribute(“src”) and getAttribute(“data-src”)?

Ask A Question

Login To post a question

On my website, I have created a lightbox that shows an image until the actual image is loaded. This is my code for loading the image:

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("slides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";}
        slides[slideIndex-1].style.display = "block";
<img class="slides" src="img/global/lazyload/lazyload.gif" data-src="img/home/Material_1.png">

Essentially I replace the src with data-src. However, I wish to run a fade-in effect once the data-src has loaded using CSS. How would I go about implementing that? Is there an on complete, or on load “event” that I can use. Is it possible to do with the only javascript?

Right now, the src image quickly snaps to the size of the actual image for a brief moment and then replaces the data-src.

For more info please click here

Have a question or need a custom quote?