2

我有一个容器，包含 3 个选项卡，当单击一个选项卡时，容器会获得一个新类 - 当它获取类时，它会更改 CSS 中的 backgroundImage，并更改选项卡容器中的内容 - 我的问题是背景图像相当重，它是PNG文件，因为我需要透明度，所以我不能将它们更改为JPG左右......

所以我想知道是否有一种方法可以在更改选项卡容器中的内容之前预加载背景图像，也许使用 .load() 函数或类似的东西？我到目前为止的脚本是：

$(".tabs-content div.tabpage").hide(); // Initially hide all content
$(".tabs li:first").attr("id", "current"); // Activate first tab
$(".tabs-content div:first").fadeIn(); // Show first tab content
$('.tab-container a').click(function(e) { //If only tabs, change to .tabs a
    e.preventDefault();
    var className = $(this).attr("name")
    $(document).find(".tab-container").attr("class", "grid_9 tab-container " + className);
    if ($(this).closest("li").attr("id") == "current") { //detection for current tab
        return
    } else {
        $(".tabs-content div.tabpage").hide(); //Hide all content
        $(".tabs li").attr("id", ""); //Reset id's
        $(this).parent().attr("id", "current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
    }
});
4

4 回答 4

1

$('IMG').attr("src","URL here! ");

于 2013-07-02T12:29:45.340 回答
0

您可以加载隐藏图像并在图像加载完成后更改它，请检查此问题的答案，我想避免重复它已经在 SO 中的代码。

于 2013-10-07T10:44:11.713 回答
0

您可以使用 JavaScript Image 对象。像这样的东西：

var img = new Image();
img.src = "http://yourserver/yourimage";

这将加载图像。更多信息在这里（但我自己没有检查文章的内容）： http: //perishablepress.com/3-ways-preload-images-css-javascript-ajax/

于 2013-07-02T12:23:10.610 回答
0

这可能是您预加载图像的最简单方法：

$.fn.loadImages = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$.loadImages(['your-image.png','your-image2.png','your-image3.png']);

如果这不起作用，请尝试将它们加载到 jquery.load 中，例如：

$.fn.loadImages = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(window).load(function(){
      $.loadImages(['your-image.png','your-image2.png','your-image3.png']);
});
于 2013-07-02T12:27:30.327 回答