Showing images after they are loaded

Question

I am searching for solution to my idea of showing images on website after they are loaded. When they are not loaded I want to hide them but leave a free space in the places they should be placed.

I need to show up images when they are loaded, because now they are loading in bad-looking way.

I tried with something like this:

$(document).ready(function(){
    $('img').css('opacity' , '0');
});

$('img').load(function(){
    $(this).css('opacity', '1');
});

Css provides animation of opacity by:

img{
   transitions: all 2s;
}

I was searching for other solutions but I did't find nothing interesting, thanks for all for your help.

What do you mean by 'bad-looking way'? Can you provide some screenshot? — Anthony Kong, Oct 12 '20 at 12:20
I have about 20 images and they are loading so long each of them in different time that is 'bad' for me. I would like to see smooth appearing image after it is completely loaded. Now images are loading 'row by row' what is similar to printing an image. — SpearMD, Oct 12 '20 at 12:30
`transition` not `transitions`. Also, if you are using an up to date version of jQuery it should be `$('img').on('load', function(){ ... })` — Turnip, Oct 12 '20 at 12:46

score 0 · Answer 1 · answered Oct 12 '20 at 12:29

0

First with CSS set opacity to 0, then with jquery set opacity to 1 or use jquery show or fadeIn.

styles.css

  img{
      opacity: 0;
  }

scripts.js

  $( document ).ready(function() {
      $('img').css('opacity' , '1');
      // $('img').show("slow");
      // $('img').fadeIn("slow");
  });

https://api.jquery.com/show
https://api.jquery.com/fadein

answered Oct 12 '20 at 12:29

Ivo Gjorgjievski

99
3

doc.ready can fire before the images have loaded. OPs approach of using the loaded event of the images is more appropriate. – Turnip Oct 12 '20 at 12:42

score 0 · Answer 2 · answered Oct 12 '20 at 12:53

0

Firstly, it should be transition and not transitions.

If you want the images to be hidden when the page loads, don't wait for the document.ready event to set the opacity to zero. Set this in your CSS.

If you are using a version of jQuery greater than 3 (which you should be), then you need to use .on() to bind your loaded event handler.

$('img').on('load', function(){
    $(this).css('opacity', '1');
});

img {
  opacity: 0;
  transition: all 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<img src="https://placehold.it/1000x1000">

answered Oct 12 '20 at 12:53

Turnip

33,774
14
81
102

I did it just like you suggested me, but there is some problem. When I come to website first time (or when I force Google Chrome to reload files by Ctrl+Shift+R) images beautifully show on the page, but when I come to this website once more (or whe I use F5 to refresh) images stay transparent (code to show them is not started). I modified code like this: `$('img').on('load', function(){ $(this).css('opacity', '1'); console.log('working!'); });` And firs time logs are shown in console, next time there are no logs until I reload by force (Ctrl+Shift+R) – SpearMD Nov 13 '20 at 14:59
That will be due to the images being loaded from cache. Some solutions here: https://stackoverflow.com/questions/5624733/jquery-load-not-firing-on-images-probably-caching and here: https://stackoverflow.com/questions/4279135/jquery-fadein-images-after-dom-has-loaded-works-sometimes – Turnip Nov 13 '20 at 15:20

Showing images after they are loaded

2 Answers2