0

I have a little annoying bug in my custom written Lightbox. When the user presses an image to view it on my website, I have a .gif that is 256x256px that is shown until my actual image has loaded. However, just before the when the data-src (the actual image I want to load) shows, the .gif briefly for a split second resizes to full image size. I wish to not have the gif resizing to the full size of the data-src image.

Here is an image of the issue: enter image description here

I believe that I need to modify some of the code, either in the javascript section or the css.

The html code for the actual image that gets opened (The slides class is part of the javascript that determines which image to show in the lightbox):

<img class="slides" src="img/global/lazyload/lazyload.gif" data-src="img/home/Material_1.png">

Here is the CSS code (The <img class"slides" src="... is inside the a div with id=lightbox):

/* Lightbox Main Window */
#lightbox {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 0;
    margin: 0;
}

/* Lightbox Slides (Image Styling) */
.slides {
    position: absolute;
    max-width: 90%;
    max-height: 90%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Here is the code for when the lightbox loads in the image:

// Show Slides
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";
        slides[slideIndex-1].setAttribute("src",slides[slideIndex-1].getAttribute("data-src"));
}

I tried to switch the position of slides[slideIndex-1].style.display = "block"; and slides[slideIndex-1].setAttribute("src",slides[slideIndex-1].getAttribute("data-src")); but it didn't change the outcome.

Any help regarding my issue will be appreciated.

  • 1
    First load the image, and only if it is loaded/available, change the visibility and source. – Andreas Sep 14 '19 at 10:28
  • @Andreas that is the perfect plan. However, I can't find any information on how I would load my data-src (dataset) with JavaScript. Is it even possible? –  Sep 14 '19 at 11:46
  • https://stackoverflow.com/questions/3646036/preloading-images-with-javascript – Andreas Sep 14 '19 at 12:10

0 Answers0