javascript - 如何让 Alert 在加载图像后运行？

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 并且发现它无法通过再次下载图像进行合作，您可能需要查看 workaround .