jquery - 使用jQuery加载背景时如何淡入div

Question

我们有一些类 'divBG' 的 div，我们希望它们中的每一个在其背景加载后立即淡入。

Answer 1

$(".divBG").hide(); //hide all cubes of class cubes
$(".divBG").each(function(){

    var id=this.id; //get cube id
    bg = $(this).css('background-image');    //get div bg url
    bg = bg.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');     //change css url property: [url('url')] ---> [url] only

    if (bg) {       //if div has bg
        var a = new Image;  
        a.onload = function( ){ $('#'+id).fadeIn(1000)};        //fade in cube when image is loaded. 
        a.src = bg; //load image with given url
    }

});

Answer 2

你的意思是这样的？

function loadImage(div, imageUrl)
{   
    var img = new Image();
    $(img).load(function () 
        {
            $(div).html(this).fadeIn(1000);
        }
    ).attr('src', imageUrl);
}

loadImage("#div1", "image.png");

这会将图像加载到 div 中，然后将其淡入。如果要将其用作背景，可以将它们放在一个容器中并在其上放置一些文本。