Javascript to only display animated gif when loaded

javascript gif animated-gif banner

11,471

Solution 1

You can do this using an Image object, like so (do this when you want to start loading the banner, probably in onload):

var banner = new Image();
var loading = new Image();
var bannerElement = document.getElementById("banner"); // assumes an element with id "banner" contains the banner image - you can get the element however you want.
banner.src = "location/of/the/image.gif";
loading.src = "loading.gif";
banner.onload = function() {
     bannerElement.removeChild(bannerElement.lastChild);
     bannerElement.appendChild(banner);
};
bannerElement.removeChild(bannerElement.lastChild);
bannerElement.appendChild(loading);

Your banner element should look like this:

<div id="banner"><img src="location/of/the/image.gif" alt="Banner" /></div>

This is so that 1) The bannerElement.removeChild part will work and 2) To keep with the principles of progressive enhancement so people without JavaScript aren't left out.

Solution 2

I don't think you need JavaScript for this - you can set your image area's background image with css (use a very small image so that it appears quickly) and then within that area have your image tag with the 2mb image's src already set. That way it should appear when ready.

example css:

#banner {background: url('/img/banner-background.jpg');}

Solution 3

How about a jquery script like http://jqueryfordesigners.com/image-loading/

So you would do

<style type="text/css" media="screen">
<!--
    BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
    H1 { margin-bottom: 2px; }

    DIV#loader {
        border: 1px solid #ccc;
        width: 500px;
        height: 500px;
        overflow: hidden;
    }

    DIV#loader.loading {
        background: url(/images/spinner.gif) no-repeat center center;
    }
-->
</style>


$(function () {
    var img = new Image();
    $(img).load(function () {
        //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
        $(this).hide();
        $('#loader').removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function () {
        // notify the user that the image could not be loaded
    }).attr('src', 'myimage.jpg');
});

Note, you dont need to create a new image element if you already have one set. If you create one already then you can just use a selector. something like $('#myimage').load(... which is an image tag with an id called myimage.

11,471

Author by

RLJ

Updated on June 05, 2022

Comments

RLJ almost 2 years

I have an animated gif banner on my website that is around 2MB. For people with slow connections, I want to include some Javascript that will only display (and start playing) this gif when it is fully loaded, so that the rest of the website will already display whilst the gif is still loading. Ideally, I would have one image (loading.gif) be displayed first, and then switched to the banner (banner.gif) with javascript when banner.gif is loaded.

How do I do this? (I'm new to Javascript)

Thanks!
qwertymk about 13 years

I don't think the IP is using jQuery
qwertymk about 13 years

and a callback function to execute the js
Ry- about 13 years

If you read my post a bit more carefully, you'll see I say "probably in onload".
RLJ about 13 years

thanks! that looks like what I want. Just one question, where exactly do I put the above code? Do I just put it directly inside <script> in <head>, or do I need to put it inside a function() which I call with onload event? Thanks
Ry- about 13 years

Like I said in my answer, you probably will want to put it in onload (in a function()), but if you put the banner image in dynamically, run this after you put it in. If the banner image is already on the page when the page is loaded, you should put it in onload.
RLJ almost 13 years

Maybe I'm not understanding you correctly, but I can't get your code to work:
RLJ almost 13 years

<html> <head> <script type="text/javascript" language="javascript"> var banner = new Image(); var loading = new Image(); var bannerElement = document.getElementById("BANNER"); banner.src = "IMG/BANNER1-2.gif"; loading.src = "IMG/loading.gif"; banner.onload = function() { bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(banner); }; bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(loading); </script> </head>
RLJ almost 13 years

<body> <div id="BANNER"><img src="IMG/BANNER1-2.gif" alt="Banner" /></div> </body> </html> But it doesn't appear to be working. loading.gif is never displayed and the banner image is displayed and starts playing before it is fully loaded (so that the first time it is run through it is all jittery). Have I done something wrong? Thanks.
RLJ almost 13 years

In fact, Even just this: bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(loading); Doesn't seem to work, whether I put it directly in <script> or inside a function that I call with a body onload.
Ry- almost 13 years

That's ecause of what I already told you - you need to put in in onload, in a function()!! As in onload = function() { var anner = new Image(); /* ... */ };.
RLJ almost 13 years

I've tried that as well. So I have the following: <html> <head> <script type="text/javascript" language="javascript"> function bannerload(){ var banner = new Image(); var loading = new Image(); var bannerElement = document.getElementById("BANNER"); banner.src = "IMG/BANNER1-2.gif"; loading.src = "IMG/loading.gif"; banner.onload = function() { bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(banner); }; bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(loading); }</script> </head>
RLJ almost 13 years

<body onload="bannerload()"> <div id="BANNER"><img src="IMG/BANNER1-2.gif" alt="Banner" /></div> </body> </html> Is this what you mean? This isn't working though. Thanks.
RLJ almost 13 years

also i've tried just this for the bannerload function: function bannerload(){ bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(loading);} Also doesn't do anything.
Ry- almost 13 years

You forgot bannerElement = document.getElementById("BANNER"); for one thing.
RLJ almost 13 years

and instead of removeChild(banner) i've also tried with removeChild(bannerElement.lastChild)
RLJ almost 13 years

so without a "body onload" then? Thats how I had it.... but it doesn't seem to be working.... sorry. Unless I'm missing something. How I have tried it is like this: jsfiddle.net/3EV2t (with or without the commented out part) or like this: jsfiddle.net/3EV2t/1 As you can see I've just put everything in the html textarea to show exactly what the entire html file looks like.
Ry- almost 13 years

JSFiddle automatically puts the JavaScript you type into onload so you don't have to do it manually. Since it works by itself, you must have a problem somewhere else in your page.