Safari/Chrome 上的 Jcarousel 加载时间问题

Question

我在 Chrome 和 Safari 上使用 jcarousel 时遇到了严重的加载时间问题。在 Firefox 上，页面加载时间不到 1 秒，在 Chrome 和 Safari 中，加载时间长达 10 秒。

轮播显示在有许多标签的主页上。在 Chrome/Safari 上，页面打开并显示除轮播选项卡以外的所有选项卡，但会冻结 10 秒，直到显示轮播选项卡。因此，我尝试将显示轮播的块移动到 Ajax 调用内部（Ajax 调用写入 li 元素并将它们发送回响应），认为轮播选项卡可能需要只要它想要打开，只要至少首先加载了其他元素，但无济于事（页面仍然冻结）。

这是我的 ajax 调用：

$.ajax({
    url:"../ajaxServices/display_showcase.php",
    success : function(data){
    $('#mycarousel').html(data);
    $('#mycarousel').jcarousel({
        vertical: true,
        scroll: 1
    });  
}
}); 

我注意到两件事：

1. 如果我从响应中删除 $('#mycarousel').jcarousel 调用，页面会快速打开。
2. 如果我从 li（在 ajax php 文件中）删除图像标签，页面会快速打开 - 但是，即使轮播中只有一个图像，我也会遇到问题，并注意所有图像都相对较小大小（一般

奇怪的是，在 Firefox 上它运行良好......

任何有关如何调试或解决此问题的帮助将不胜感激...

Answer 1

首先，确保您的图片都已指定宽度和高度（以像素为单位）。

其次，也尝试将您的 ajax 调用包装在 window.load 语句中，如下所示： $(window).load(function() { // Your jcarousel call });

如果您使用的是 jquery.carousel.js，则搜索旨在修复一些旧但现在已过时的浏览器条件的块。例如，在第 184 行左右，在 jquery.carousel.js 中注释以下内容：

/*if ($.browser.safari) {
  this.buttons(false, false);
  $(window).bind('load', function() { self.setup(); });
} else */
  this.setup();

并在第 858 行注释以下内容：

/*if (p == 'marginRight' && $.browser.safari) {
        var old = {'display': 'block', 'float': 'none', 'width': 'auto'}, oWidth, oWidth2;

        $.swap(el, old, function() { oWidth = el.offsetWidth; });

        old['marginRight'] = 0;
        $.swap(el, old, function() { oWidth2 = el.offsetWidth; });

        return oWidth2 - oWidth;
        }*/