2

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!

RLJ
  • 135
  • 2
  • 6
  • 10
  • 1
    Not meaning to be rude about it, but if I were to visit your site via a mobile browser and you dumped a 2Mb GIF on me, I'd be a bit cranky. I'd suggest at least detecting mobile browsers and having a mobile version of your site - or, if not that, then down-sizing your banner. – uglybugger Apr 29 '11 at 01:07

3 Answers3

4

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476
  • and a callback function to execute the js – qwertymk Apr 29 '11 at 01:09
  • If you read my post a bit more carefully, you'll see I say "probably in `onload`". – Ry- Apr 29 '11 at 01:16
  • 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 – RLJ May 02 '11 at 17:58
  • 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`. – Ry- May 02 '11 at 18:01
  • Maybe I'm not understanding you correctly, but I can't get your code to work: – RLJ May 06 '11 at 15:12
  • – RLJ May 06 '11 at 15:13
  • Banner

    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 May 06 '11 at 15:13
  • In fact, Even just this: bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(loading); Doesn't seem to work, whether I put it directly in – RLJ May 06 '11 at 15:25
  • 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(); /* ... */ };`. – Ry- May 06 '11 at 16:17
  • I've tried that as well. So I have the following: – RLJ May 06 '11 at 18:54
  • Banner

    Is this what you mean? This isn't working though. Thanks.

     – RLJ May 06 '11 at 18:55
  • also i've tried just this for the bannerload function: function bannerload(){ bannerElement.removeChild(bannerElement.lastChild); bannerElement.appendChild(loading);} Also doesn't do anything. – RLJ May 06 '11 at 18:57
  • You forgot `bannerElement = document.getElementById("BANNER");` for one thing. – Ry- May 06 '11 at 20:31
  • and instead of removeChild(banner) i've also tried with removeChild(bannerElement.lastChild) – RLJ May 06 '11 at 20:35
  • 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: http://jsfiddle.net/3EV2t/ (with or without the commented out part) or like this: http://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. – RLJ May 06 '11 at 21:41
  • 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. – Ry- May 06 '11 at 23:37
1

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.

Matt
  • 7,049
  • 7
  • 50
  • 77
0

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');}

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
tomfumb
  • 3,669
  • 3
  • 34
  • 50