Chrome，不在本地渲染我的jquery幻灯片，但在线时加载（互联网）（在FF，IE中工作）

Question

我好像已经找到了问题，但我是：

1. 不确定“为什么”正在发生
2. 不确定如何解决？

背景：

我正在利用css将图像设置为宽度= 100％，让浏览器根据屏幕尺寸相应地调整高度。

在Chrome中进行调试时，我可以看到我的高度变量为0 ...所以看起来这个脚本在Chrome有时间对图像进行处理之前就已经运行了？

• 在线观看时，幻灯片显示效果非常好
• 幻灯片使用FF和IE
在本地和在线工作
• 如上所述，在本地Chrome不起作用，但在线（远程主机）
时可以使用

我担心这个问题也会在网上显现出来......因为显然有一些条件吓坏了......我想解决这个问题。

代码：

$(document).ready(function () {
    ReloadBanner();
});

function ReloadBanner() {

    var width = $(".BannerHolder div.slides div a img").width();    // Current image width
    var height = $(".BannerHolder div.slides div a img").height();  // Current image height

    $(".BannerHolder").jContent({
        orientation: 'horizontal',
        easing: "easeOutCirc",
        duration: 500,
        auto: true,
        pause_on_hover: true,
        direction: 'next',
        pause: 6000,
        height: height,
        width: width
    });

    $("div.slides").children().css('margin', '0 auto');
    $("div.slides").children().css('text-align', 'center');

}

Answer 1

您应该绑定到image onload事件，例如：

$(document).ready(function () {
    var $img = $(".BannerHolder div.slides div a img");
    $img.one('load', ReloadBanner);
    // next line is to fire onload event of image on older browser even image already cached
    if ($img[0].complete) $img.load();
});