编辑:
我把代码改了一点。首先,我制作了一个保存视图页面模板的辅助母版页。然后我添加了一点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);
});
此外,我修改了swap脚本以修改图像标记,而不是使用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%的问题。每隔一段时间,其中一个或两个图像交换的时间会比其他图像要长。还有什么建议吗?
谢谢!
您好:
我用jquery为我的ASP.NET MVC网站制作了一个简单的库。我有一张大的中心图片和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);
});
很简单,它从视图状态获取产品,然后使用它来确定图像集。
以下是交换代码:
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");
});
}
奇怪的是,有时它会无缝地加载图像,有时它会正常地淡出,“冻结”,然后以超快的速度淡出。
有什么解决这个问题的想法/建议吗?