CODEWITHSUNDEEP
javascripthtmlcssimage
RianneJ
RianneJ

Reputation: 163

Images written in my HTML are not visible

I am creating a gallery on my first webpage and have seen a template i would like to use. Some of these images will show once, but when the page has refreshed the image shows for a second but then disappears. It is still on the page as the cursor changes to a pointer when you hover over where the image should be.

I have had a look a the Javascript and CSS but as i am still new at web development i am unsure which line it is that is causing the image to not be visible. I have created a codepen for you to see. https://codepen.io/Jaderianne/pen/KjLGqd

HTML:

<div class="gallery" id="gallery">
   <div class="gallery-item">
       <div class="content"><img src="http://turbophoto.com/Free-Stock- 
Images/Images/Ancient%20Horse%20-%2027%20Years%20Old.jpg" alt=""></div>
   </div>
   <div class="gallery-item">
        <div class="content"><img 
src="https://source.unsplash.com/random/?tech,substance" alt=""></div>
    </div>
    <div class="gallery-item">
        <div class="content"><img 
src="https://source.unsplash.com/random/?tech,choose" alt=""></div>
    </div>
</div>

JAVASCRIPT:

var gallery = document.querySelector('#gallery');
var getVal = function (elem, style) { return 
parseInt(window.getComputedStyle(elem).getPropertyValue(style)); };
var getHeight = function (item) { return 
item.querySelector('.content').getBoundingClientRect().height; };
var resizeAll = function () {
var altura = getVal(gallery, 'grid-auto-rows');
var gap = getVal(gallery, 'grid-row-gap');
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
    var el = item;
    el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / 
(altura + gap));
});
};
gallery.querySelectorAll('img').forEach(function (item) {
item.classList.add('byebye');
if (item.complete) {
    console.log(item.src);
}
else {
    item.addEventListener('load', function () {
        var altura = getVal(gallery, 'grid-auto-rows');
        var gap = getVal(gallery, 'grid-row-gap');
        var gitem = item.parentElement.parentElement;
        gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + 
gap) / (altura + gap));
        item.classList.remove('byebye');
    });
}
});
window.addEventListener('resize', resizeAll);
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
item.addEventListener('click', function () {
    item.classList.toggle('full');
});
});

I would like the images to be visible at all times even when the page has been refreshed.

Upvotes: 1

Views: 109

Answers (1)

ADyson
ADyson

Reputation: 61819

The first img has got the class "byebye" which sets its opacity to 0, which is why it appears invisible. This is added by a line in a foreach:

gallery.querySelectorAll('img').forEach(function (item) {
  item.classList.add('byebye');

The code then checks if the image has finished loading:

if (item.complete) {

If it has finished loading, it does nothing except log data to the console. If it hasn't finished loading it adds a event listener to wait for the image to load. When that event fires, it runs code which (among other things) removes the "byebye" class.

The problem seems to be that your first image has already finished loading when this code runs, so the event handler never gets added and so the "byebye" class is never removed.

This can be fixed by making it trigger the same code in either case (whether the image is already loaded or not):

gallery.querySelectorAll("img").forEach(function(item) {
  item.classList.add("byebye");
  if (item.complete) {
    console.log(item.src);
    loaded(item);
  } else {
    item.addEventListener("load", function() {
      loaded(item);
    });
  }
});

//...

function loaded(item) {
  var altura = getVal(gallery, "grid-auto-rows");
  var gap = getVal(gallery, "grid-row-gap");
  var gitem = item.parentElement.parentElement;
  gitem.style.gridRowEnd =
    "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
  item.classList.remove("byebye");
}

CodePen: https://codepen.io/ADyson82/pen/OeYBZe

Upvotes: 1

Related Questions