Chrome似乎无法正常运行我的脚本…有时

Question

我正在ASP.NET MVC上开发一个网站，该网站应该在下个月初投入使用，但遇到了一个问题，我既找不到原因也没有解决方案。

我写了一张带有图像滑块的页面。 通常，它可以正常工作。 它永远不会在IE或Firefox中造成麻烦，并且Firebug永远不会引发任何错误。 但是，Chrome似乎无法在大约50％的时间内正确运行初始化脚本。 有时它起作用，有时却不起作用。 设置图像位置并调整滑块主体大小的函数与在窗口调整大小时调用的函数相同，只是在初始化时直接从构造函数中调用。

如果初始化失败，则函数将正确执行，并且在调整窗口大小或刷新页面后，滑块会立即工作（在两种情况下，都将再次调用大小调整函数）。

我不知道从哪里开始寻找问题。 是否有类似Chrome的萤火虫之类的东西，所以我可以看看问题可能出在哪里？ 由于该问题从未在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")");
});

我几乎感觉到$（document）.ready在创建所有id之前被调用为时过早，但是我无法验证这一点。

Answer 1

我的扩展名也有同样的问题，所以我通过setInterval在脚本中添加了大约3秒的延迟