Browser caching image prevents fade in

Question

I have a page where I want all my images to fade in once they have loaded, but separately, and I have it working fine using the following...

<style>
img.imgfade {display:none;}
</style>

<script>
$(document).ready(function() {  
    $('img.imgfade').load(function() {  
        $(this).fadeIn('slow');  
    });
});  
</script>

The problem I have here, is after navigating away from the page, and then coming back again, the images are no longer there. This is probably because they are already stored in the browser cache, and so are already loaded before my javascript runs.

I've been researching this all afternoon, but can't find an alternative where the images load and fade in seperately. One method I found says to include an .each() function to the .load(). This each can check if an image is already complete and if so just manually call .load() but when I add it, the images don't even load the first time round.

<script>
$(document).ready(function() {  
    $('img.imgfade').load(function() {  
        $(this).fadeIn('slow');  
    });.each(function() {
    if(this.complete) {
        jQuery(this).load();
    }
});  
</script>

SOLVED: The question was solved below, so I am sharing my full code incase it helps anyone else. This will fade in your images one at a time as they load, and also will not be affected by the browser caching images when you return to the page.

    <style>
    img.imgfade {display:none;}
    </style>

    <script>
    (function ($) { 
    $(document).ready(function() {  
        $('img.imgfade').load(function() {  
            $(this).fadeIn('slow');  
        })
    .each(function() {
        if(this.complete) {
            jQuery(this).load();
        }
    });
    })(jQuery);
    </script>

Possible duplicate [jQuery How do you get an image to fade in on load?](http://stackoverflow.com/questions/1383870/jquery-how-do-you-get-an-image-to-fade-in-on-load) — user1477388, Jan 13 '14 at 17:31
@user1477388 I have already read that thread, but it does not include the solution for the images being cached in the browser, and loading before the JS. — Collins, Jan 13 '14 at 17:40

Fabrizio Calderan · Accepted Answer · 2014-01-13T17:39:47.373

6

});.each(function() {

try to remove the semicolon ; otherwise your code will raise a syntax error.

Remember to also add a }); for your each(function()... )

So the code becomes

...
})
.each(function() {
    if(this.complete) {
        jQuery(this).load();
    }
});

edited Jan 13 '14 at 17:39

answered Jan 13 '14 at 17:34

Fabrizio Calderan

120,726
26
164
177

I tried this, but it is now preventing any images from loading at all. In Dev tools i am seeing "SyntaxError: Unexpected end of input" - Please see my updated question for what I currently have – Collins Jan 13 '14 at 17:59
I was simply missing a }); Thankyou very much! – Collins Jan 13 '14 at 18:08

Kevin Jantzer · Answer 2 · 2014-01-13T17:46:13.357

You can make this happen with modern CSS3 transitions and a onload attribute like so:

<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="this.classList.add('show')">

img {
    opacity: 0;
    -webkit-transition: 1000ms opacity;
    -moz-transition: 1000ms opacity;
    -ms-transition: 1000ms opacity;
    -0-transition: 1000ms opacity;
    transition: 1000ms opacity;
}

img.show {
    opacity: 1
}

Example

Granted, I used vanilla JS with this.classList which may not be suitable for you if you need older browser support

But you can always swap out for jQuery: $(this).addClass('show')

And here's an example using jQuery to perform the fade in:

<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="$(this).fadeIn(1000)">

img {
    display: none;
}

Browser caching image prevents fade in

2 Answers2

Example

Example