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的事还有关于延迟（）的事关于超时

但我是新编码，并不明白我该怎么做以及如何做。

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并且通过再次下载图片发现它不合作，您可能需要查看workaround。

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

1 个答案: