Chrome没有'似乎运行我的脚本正确…有时候
Chrome doesn't seem to run my script properly... some of the time
我正在开发一个网站上的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
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 为什么我的控制器没有启动函数.js脚本
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- 为什么我的javascript脚本在页面加载时运行,而不是使用onclick
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 我如何让我的脚本连续提交两个表单
- 不同'单击'不同脚本中的回调:我可以控制执行顺序吗
- 我的时间倒计时脚本在谷歌浏览器中工作正常,但在其他浏览器中打开时它显示为南楠
- 为什么当我需要位于顶部的函数时,在脚本中的某些点上没有定义函数
- 我的脚本不起作用
- 我可以把这个脚本放在我的内容上面吗
- 为什么我的脚本正在运行动画,但没有显示它
- 有没有一种方法可以生成Braintree令牌,而不必向我的服务器添加PHP脚本
- 我的代码在<脚本>标记,但没有'不能在外部文件中工作
- 脚本在我的引导模式中不起作用
- 我如何才能在点击按钮时将我的数字和财富显示在这个脚本上
- 如何在我的情况下创建加载脚本
- 火虫找到隐藏我的元素的脚本
- 为什么我的JavaScript / JSON脚本不能在Internet Explorer中工作
- 使用我的基于标签的平滑滚动脚本而不带“a”的解决方案