Chrome没有'似乎运行我的脚本正确…有时候

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

本文关键字:脚本 我的 有时候 运行 没有 Chrome      更新时间:2023-09-26

我正在开发一个网站上的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")");
});

我几乎能感觉到$(document)。ready在创建所有id之前被过早地调用,但是我没有办法验证。

我有同样的问题与我的扩展,所以我把延迟约3秒在我的脚本通过setInterval