Chrome似乎不能正确运行我的脚本...在某些时候

Question

我正在开发一个关于ASP.NET MVC的网站，它应该在下月初上线，但我有一个问题，我既找不到原因，也找不到解决方案。

有一个页面上的图像滑块是我自己写的。一般来说，它工作起来没有任何问题。它从来不会在IE或Firefox中造成麻烦，Firebug也不会抛出任何错误。然而，Chrome似乎在大约50%的时间里不能正确运行初始化脚本。设置图像位置和调整滑块主体大小的函数与在窗口调整大小时调用的函数相同，只是在初始化时直接从构造函数调用。

如果初始初始化失败，则只要调整窗口大小或刷新页面，函数就会正确执行，滑块就会工作(在这两种情况下，都会再次调用调整大小函数)。

我不知道从哪里开始寻找问题。有没有类似chrome的firebug之类的东西，这样我就可以看看哪里可能出问题了？因为这个问题在Firefox中从来没有发生过，firebug在这种情况下有点没用……

无论如何，下面是构造函数和大小调整函数，以防有人发现明显的问题。

构造函数：

function ImageSlider(container_id, next_button_id, prev_button_id, image_class, fullscreen_close_icon){
this.container = $(container_id);
this.images = this.container.children("img" + image_class);
this.image_comments = this.container.contents("div" + image_class);
this.current_image = 0;

if (!fullscreen_close_icon)
{
    this.close_icon = null;
}
else
{
    this.close_icon = fullscreen_close_icon;

}

this.body_overflow = $("body").css("overflow");             //storing the original overflow of the body, because we're going to hide for the fullscreen view of the image

//initialising images
this.resize();
for (var i = 1; i < this.images.length; ++i)
{
    this.images.eq(i).css("opacity", "0");
    this.image_comments.eq(i).css("opacity", "0");
}

var nextbutton = this.container.find(next_button_id);
var prevbutton = this.container.find(prev_button_id);
if (nextbutton == null || nextbutton.length == 0)
{
    nextbutton = $(next_button_id);
}
if (prevbutton == null || prevbutton.length == 0)
{
    prevbutton = $(prev_button_id);
}
var that = this;
nextbutton.click(function(){that.nextImage()});
prevbutton.click(function () { that.prevImage() });

if (this.close_icon != null)
{
    this.container.click(function () { that.fullScreenImage() });
}
$(window).resize(function(){that.resize()});}

调整大小函数：

ImageSlider.prototype.resize = function () {
var tallestelement = 0;
var tallestsize = 0;
var topoffset = this.images.eq(0).outerHeight(true) + this.image_comments.eq(0).outerHeight(true);
for (var i = 1; i < this.images.length; ++i) 
{
    //position the current element at the top of the container
    this.images.eq(i).css("top", (topoffset * -1));
    this.image_comments.eq(i).css("top", (topoffset * -1));
    //measure the height of the current element, image and text
    var elementheight = this.images.eq(i).outerHeight(true) + this.image_comments.eq(i).outerHeight(true);
    //add height of the current element to the total offset
    topoffset = topoffset + elementheight;
    //check if the current element is the tallest so far in the slider
    if (elementheight > tallestsize)
    {
        tallestsize = elementheight;
        tallestelement = i;
    }
}

//resize the container to fit the tallest element
this.container.css("height", this.images.eq(tallestelement).outerHeight(true) + this.image_comments.eq(tallestelement).outerHeight(true) + "px");}

以及对cshtml中构造函数的调用：

<script>
$(document).ready(function () {
    var slider = new ImageSlider("#slider_image_wrapper", "#upbutton", "#downbutton", ".image", "@Url.Content("~/Content/Images/close.png")");
});

​

我几乎感觉到在创建所有I之前调用$(document).ready太早了，但我无法验证这一点。

Answer 1

我的扩展也遇到了同样的问题，所以我通过setInterval在脚本中设置了大约3秒的延迟