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
    });  
}
});

我注意到两件事：

如果我从回复中删除$（＆＃39;＃mycarousel＆＃39;）。jcarousel来电，页面会快速打开。
如果我从li中移除图像标签（在ajax php文件中），页面会快速打开 - 但是，即使在旋转木马中有一个单独的图像并注意到所有图像都相对较小，我也面临着这个问题大小（一般<40 kb）。

奇怪的是，在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;
        }*/

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

1 个答案: