Fading in a High-Res image after it's cached

Question

Is there a best way to gracefully fade in high-res images with javascript/jquery after the client has cached it, similar to the way Bing or Yahoo Mail does it ?

score 1 · Accepted Answer · answered Oct 26 '11 at 16:33

1

You're looking for the load function in jQuery. Here is an example:

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){           
            $("#bigImg").load(function() {
                $(this).fadeIn(2000);
            });
        });
    </script>
</head>
<body>
    <img id="bigImg" style="display:none" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/2006-03-26_Denver_Skyline_I-25_Speer.jpg" />
</body>
</html>

And the jQuery reference: http://api.jquery.com/load-event/

Happy coding!

answered Oct 26 '11 at 16:33

Justin Beckwith

7,686
1
33
55

There are some significant caveats detailed on the load-event page you have linked to. The behavior is inconsistent cross browser and it does not get fired for cached images, which is specifically what the OP is looking for. – Finbarr Oct 26 '11 at 16:59
I read the blurb from the jquery article you're referring to - they do list it as an issue. I ran a test with firebug, and the image fades in perfectly fine when loading from the cache. I kind of wish the exact scenario they're afraid of was laid out more explicitly. – Justin Beckwith Oct 26 '11 at 18:26
1

After searching around a bit, someone already has an answer for workaround: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached – Justin Beckwith Oct 26 '11 at 18:27

score 1 · Answer 2 · answered Oct 26 '11 at 17:32

When preloading an image, I always do this :

newpic = new Image();      // create your new img
newpic.onload = function() // callback for when the img is loaded
{
                           // your callback, for you a .fadeIn()
};
newpic.src = your_img.jpg;  // Setting the img src will start the caching process

It works well.

Fading in a High-Res image after it's cached

2 Answers2