如何在加载图像后使警报运行？

Question

我有这个代码,我希望只有在加载backgroundImage后才会弹出警报.

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

alert ("button is loaded");

这button.jpg是一个小尺寸:3 KB.
但是当我点击按钮元素时,首先会弹出警报,并在图像完成后2秒内弹出.

我读了关于callBack的内容
也讲述了Delay()
也是关于超时的

但我是新编码,并不明白我该怎么做,怎么做.

Answer 1

您将load首先在图像上设置一个事件.

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.

然后,当加载图像时,将调用加载回调并更新背景.

如果您需要支持IE6并且通过再次下载图像发现它不合作,您可能需要查看一种解决方法.