Question

如果这些是经典的HTML图像，那么很容易让javascript等待加载一些图片。

但如果将图像作为CSS backuground-image加载，我无法想象如何做同样的事情！

有可能吗？

jQuery .load()方法似乎不适用..而且我缺乏想法

Answer 1

它查找具有src属性或背景Image 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);
    });
}

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（并可能将其缓存）并返回相同的内容。

Answer 3

这是未经测试的代码，但请尝试以下方法：

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

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

Answer 4

试试这个...

它是一个jQuery-Plugin，可让您控制等待加载图像

Project-Home

线程@ SO Official way to ask jQuery wait for all images to load before executing something

回答@ SO (ShortLink)

JS等待加载CSS背景图像

4 个答案: