JavaScript等待CSS背景图片加载

Question

如果这些图片是经典的HTML图片，那么很容易让JavaScript等待它们加载。

但是，如果图像作为CSS background-image加载，我不知道如何做到同样的效果！

有可能吗？

jQuery的.load()方法似乎不适用... 我想不出其他办法了。

- Valentino

---

你可能想查看这个答案：https://dev59.com/bHA75IYBdhLWcg3wFEsI - Jason Gennaro

很遗憾，后台加载不会触发任何事件。那我想我会使用预加载器来使其正常工作。感谢你们的提示。 - Valentino

你可以使用AJAX来完成这个操作，在请求成功后结束等待。 - Ali U

我考虑过这个问题，但是一旦我将我的图像放入JS对象中，我该如何将其用作CSS背景？ - Valentino

可能是重复的问题：官方方法询问jQuery在执行某些操作之前等待所有图像加载 - Lix

Answer 1

它查找具有src属性或backgroundImage CSS属性的元素，并在它们的图像加载时调用一个动作函数。

/**
 * Load and wait for loading images.
 */
function loadImages(images, action){
    var loaded_images = 0;
    var bad_tags = 0;        

    $(images).each(function() {
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
        var image = new Image();
        var src = $(this).attr("src");
        var backgroundImage = $(this).css("backgroundImage");            
        // Search for css background style
        if(src == undefined && backgroundImage != "none"){
            var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;                
            src = pattern.exec(backgroundImage)[1];                
        }else{
            bad_tags++;
        }
        // Load images
        $(image).load(function() {
            loaded_images++;                
            if(loaded_images == ($(images).length - bad_tags))
                action();
        })
        .attr("src", src);
    });
}

- Arkadiusz Cieśliński

Answer 2

另一种替代方法是通过 AJAX 获取图像数据，作为 base64 编码的 PNG，并将其应用于元素的 background-image 属性。

例如：

$.get('/getmyimage', function(data) {
    // data contains base64 encoded image
    // for ex: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

    $('#yourElement').css('background-image', 'url("' + data + '")');
});

您还需要一个服务器端脚本，该脚本读取图像，将其转换为base64编码的png格式（并可能缓存它），然后返回相同的内容。

- techfoobar

Answer 3

试试这个...

这是一个jQuery插件，它可以让你控制等待图片加载

项目主页

在SO上的讨论 官方方法：在执行某些操作之前等待所有图像加载完成

在SO上的答案 (短链接)

- DerDu

---

这真的不是一个答案 - 你所做的只是在站点内链接到另一篇帖子...随着更多的声望，你将能够在评论中留下这种帮助... - Lix

是的，我知道，但我不想两次发布解决方案，所以不要因为它是一个链接就投票反对它...它是一个解决方案；-) 它在这个问题上完美地为我工作...[做了一点编辑] - DerDu

你不会因为发布其他人答案的链接而获得声望... 如果你想，我可以代表你将其发布为评论。无论如何，如果另一个问题的答案也回答了这个问题，那么这个问题就是重复的，本来就不应该存在... 我会撤销我的负评，但请不要发布仅包含链接的答案... - Lix

好的，我会尽力而为 :-) 谢谢，如果您喜欢，请将其作为评论添加到问题中。 - DerDu

Answer 4

这是未经测试的代码，但可以尝试一下：

$(document).ready(
 function() 
 {
   var imgSrc = $('theTargerElement').css('background-image');
   var imgTag = $('<img>').attr('src',imgSrc).appendTo( 'body' );
 }
);

$(document)
 .load( 
   function() 
   {
     // do stuff
   } 
  );

- Shaheer

---

为什么不测试一下呢？ - ggorlen