Chrome doesn't seem to run my script properly… some of the time

Question

I'm developing a website on ASP.NET MVC that's supposed to go live early next month, and I'm having a problem I can't find neither cause nor solution to.

There's one page with an image slider I wrote myself. In general, it works without trouble. It never causes trouble in IE or Firefox, and Firebug doesn't throw any errors ever. However, Chrome doesn't seem to run the initialisation script properly about 50% of the time. Sometimes it works, sometimes it doesn't. The function that sets the image positions and resizes the body of the slider is the same that gets called on a window resize, just that on initialisation it is called directly from the constructor.

If the initial initialisation fails, the function gets executed properly and the slider works as soon as the window is resized or the page is refreshed (in both cases, the resizing function is called again).

I have no idea where to start looking for the problem. Is there something like firebug for chrome, so I could take a look where things might go wrong? as the problem never occurs in Firefox, firebug is kinda useless in this situation...

Anyways, here's the constructor and the resizing function, in case somebody spots an obvious problem.

constructor:

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

resizing function:

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

And the call to the constructor in the cshtml:

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

I almost get the feeling that $(document).ready gets called too early before all the ids are created, but I have no way of verifying that.

Answer 1

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