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秒的延遲