簡單自制的jQuery畫廊閃爍有時

我改變了代碼一點點。首先，我創建了一個輔助MasterPage，用於保存視圖頁面的模板。然後我平添了幾分ASP腳本有第一圖像存在：

<img src="<%= string.Format("/Content/Images/Products/{0}1.jpg\"", 
        ViewData["CurrentPage"]) %>" alt="" class="imgborder" />

我還添加了「預加載」的腳本，我發現（不知道是否可行，或者如果我正確地執行它）：

(function ($) { 
    var cache = []; 
    $.preLoadImages = function() { 
     var args_len = arguments.length; 
     for (var i = args_len; i--;) { 
      var cacheImage = document.createElement('img'); 
      cacheImage.src = arguments[i]; 
      cache.push(cacheImage); 
     } 
    } 
})(jQuery)

，然後在頁腳：

$(document).ready(function() { 
     var cPage = '<%= ViewData["CurrentPage"] %>'; 
     var temp = ""; 
     for (var i = 1; i <= 6; i++) { 
      temp += "\"/Content/Images/Products/" + cPage + i + ".jpg\""; 
      if (i < 6) temp += ", "; 
     } 
     jQuery.preLoadImages(temp); 
});

此外，我修改了交換腳本來修改圖像標記，而不是生成它使用jQuery：

function swapImage(val) { 
    $("#CenterImage > img").fadeOut("fast", function() { 
     var cPage = '<%= ViewData["CurrentPage"] %>'; 
     var temp = "/Content/Images/Products/" + cPage + val + ".jpg"; 
     $(this).attr("src", temp); 
     $(this).load(function() { 
      $(this).fadeIn("slow"); 
     }); 
    }); 
}

這似乎已經解決了問題的99％的時間。每過一段時間，其中兩張圖像可能會比其他圖像更換時間更長。還有什麼建議？

謝謝！

你好SO：

我做了一個簡單的畫廊爲我的ASP.NET MVC的網站使用jQuery。我有一個大型的中心圖片和6個較小的縮略圖。下面是設置在負荷中心的div代碼：

$(document).ready(function() { 
    var cPage = '<%= ViewData["CurrentPage"] %>'; 
    var temp = "<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />"; 
    $("#CenterImage > p").html(temp); 
});

很簡單它從ViewState中的產品，然後使用它來確定圖像集。

下面是交換代碼：

function swapImage(id) { 
    $("#CenterImage > p").fadeOut("fast", function() { 
     var cPage = '<%= ViewData["CurrentPage"] %>'; 
     var temp = "<img src=\"/Content/Images/Products/" + cPage + id + ".jpg\" alt=\"\" class=\"imgborder\" />"; 
     $("#CenterImage > p").html(temp); 
     $("#CenterImage > p").fadeIn("slow"); 
    }); 
}

怪異的一部分，有時它加載圖像無縫地和其他時間淡出正常，「凍結」起來，然後淡入超級快。

解決此問題的任何想法/建議？

來源

2010-07-14 Anders

的解決方案是後褪色像加載圖像，從而：

$("#CenterImage > p").load(function() { $(this).fadeIn("slow"); });

來源

2010-07-14 23:39:27

您正在向DOM中插入一個新圖像，該圖像可能被緩存，也可能不會被緩存。最好在插入之前創建元素，綁定一個負載監聽器，然後在確定圖像已加載後追加並顯示。

var $temp = $("<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />"); 

$temp.hide().bind('load', function() { 
    $("#CenterImage > p").empty().append($temp); 
    $temp.show(); 
}

來源

2010-07-14 23:32:55 draeton

簡單自制的jQuery畫廊閃爍有時

回答

相關問題