Question

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

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

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

我不知道从哪里开始寻找问题。有什么像萤火虫的铬，所以我可以看看哪里可能出错？因为问题永远不会发生在Firefox中，在这种情况下，firebug是没用的......

无论如何，这里是构造函数和resizing函数，以防有人发现明显的问题。

构造

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秒左右

Chrome似乎无法正常运行我的脚本......有些时候

1 个答案: