Javascript JS等待CSS背景图像加载

如果一些图像是经典的HTML图像，javascript很容易等待加载

但是如果图像作为CSS

backuground图像加载，我想不出该怎么做

可能吗

jQuery
.load（）
方法似乎不适用。。我缺乏想法
这是未经测试的代码，但请尝试以下方法：

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

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

$（文档）。准备好了吗(
函数（）
{
var imgSrc=$（'thetargetrelation'）.css（'background-image'）；
var imgTag=$（'试试这个

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


线程@SO

回答“是”
它查找具有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);
    });
}

另一种方法是通过AJAX获取图像数据，作为base64编码的png，并将其应用于元素的
背景图像
属性

例如：

$.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（并可能对其进行缓存）然后返回相同的结果。
首先想到的是在一个实际的img元素中预先设置图像，您可以将其隐藏。例如：。可能有更好的解决方案。您可能想看看这个答案：我还没有尝试过这个，但您可以从JS/jQuery中预加载图像（如用于旧式图像滚动），检查图像的加载状态，然后在图像加载后，将CSS background属性分配给同一图像，然后在图像准备就绪时继续执行任何其他JS？这样背景加载不会触发任何事件。太糟糕了。然后我想我将设法使其与预加载程序一起工作。谢谢您的提示你可以使用AJAX来实现这一点，在成功后，你的请求完成了你的等待。这真的不是一个答案-你所做的只是链接到网站内的另一个帖子…再多做一点代表，你就可以在评论中留下这种帮助…是的，我知道，但我不想发布两次解决方案，所以不要因为这是一个问题就否决它链接…这是一个解决方案；-）在这个问题上对我非常有效。【做了一点编辑】如果你愿意的话，我会把它作为一个评论发布给你。在任何情况下，如果另一个问题的答案也回答了这个问题，这意味着这个问题是重复的，它本来就不应该存在。我会删除我的反对票，但请不要发布nk只回答…好的，我尽我最大的努力：-）thx，如果你愿意，把它作为评论添加到问题中