1

I have this code and I want that the alert will pop up only after the backgroundImage is loaded.

$('#element').click(function(){
    $('#element').css({
        backgroundImage: "url('http://www.button.jpg')",
        backgroundRepeat: 'no-repeat',
        backgroundPosition: '7px 5px'});;

alert ("button is loaded");

The button.jpg is a small size: 3 KB.
But when I click on the button element, first the ALERT pop up, and 2 seconds after the image is complete loding.

I read about callBack
Also about Delay()
Also about timeout

But I am new in coding, and didn't understand what and how should I do here.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Shai.m
  • 21
  • 1
  • 1
  • 2

1 Answers1

5

You would set up a load event on the image first.

var imgSrc = 'http://www.button.jpg';

$('#element').click(function() {

    var img = new Image,
        element = $(this);

    img.onload = function() {

        element.css({
            backgroundImage: "url('" + imgSrc + "')",
            backgroundRepeat: 'no-repeat',
            backgroundPosition: '7px 5px'
        });

        alert("button is loaded");

    }

    img.src = imgSrc;

});

jsFiddle.

Then, when the image has been loaded, the load callback will be called and the background will be updated.

If you need to support IE6 and are finding it won't cooperate by downloading the image again you may need to look into a workaround.

Community
  • 1
  • 1
alex
  • 479,566
  • 201
  • 878
  • 984
  • Other than the extra spaces, exactly as I imagined it. :) – Jared Farrish Jun 17 '11 at 23:58
  • +1 good workaround (I think) :) (even better if add some explanation...) – Felix Kling Jun 17 '11 at 23:58
  • ... And the fact that `imgSrc` is declared out of scope, not sure if that's necessary. – Jared Farrish Jun 17 '11 at 23:59
  • It doesn't work. And I forgot to say that this code is inside this: $(document).ready(function(){ – Shai.m Jun 18 '11 at 00:01
  • @Jared Saves it being declared and assigned on each click of the element :) – alex Jun 18 '11 at 00:01
  • Your solution works in most cases, but surprisingly enough, some versions of IE has some issues with this method. There is a work around using execCommand which you can use, which is quite well described here http://stackoverflow.com/questions/6285108/ie6-background-image-load-event. – Niklas Jun 18 '11 at 00:01
  • @Shai *It doesn't work* is rarely enough useful information to go on. The jsFiddle does, so you must of made a mistake somewhere. Can you elaborate? Thanks. – alex Jun 18 '11 at 00:01
  • @Niklas That problem (I believe) is setting the `src` property before the `load` event. I don't know why I did it this way this time :P Will make an edit. – alex Jun 18 '11 at 00:03
  • @Jared Yeah, but that's extra complexity. I'm assuming this code will be placed in a function itself so the `imgSrc` variable is available to that event handler and probably it only. – alex Jun 18 '11 at 00:05
  • @alex the problem I described has nothing to do with when you set the `src` property but the problem of some IE versions not using the already loaded, cached image, when defining the background image, and instead downloading a new copy of it – Niklas Jun 18 '11 at 00:05
  • @alex - You know what *they* say about *assumptions*... ;) – Jared Farrish Jun 18 '11 at 00:06
  • @Niklas OK, thanks, I didn't read it in depth. I'll make an edit. – alex Jun 18 '11 at 00:07