Question

我可以通过jQuery orbit plugin生成一个生成的图片滑块link to slider on my site。我的问题是在页面上遇到半秒小故障，而jQuery代码执行时会生成与图像相符的div。包装器以css代码为中心：

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative;
    margin:0 auto;
}

包装器似乎从左侧稍微移动到位于页面中心。我希望在JavaScript运行之前不要显示包装器以避免问题。任何想法都非常感谢！

Answer 1

我最近遇到了同样的问题。尝试将display: none;添加到容器div中。这将阻止它显示瞬间闪光。加载完成后，您可以通过jQuery将none;更改为block;：

<script type="text/javascript">
     $(document).ready(function(){
     $('#whateverSelector').show();
});
</script>

您可以将其放在</body>之前的文档末尾或</head>之前（更好）。

也许none;被覆盖在CSS中的某处。尝试添加内联样式，看看你是否可以“强制”它的工作。这在HTML中：<div class="orbit-wrapper" style="display:none;">...我希望有所帮助。

Answer 2

不是将其隐藏在display:none;中，而是将其从内容流中移除，而只是使其隐藏，style="visibility:hidden;"或此...

#myWrapperDiv {
    visibility:hidden;
}

然后在页面加载完成后（包括图像），使用此显示...

$(window).load(function(){
    $('#myWrapperDiv').css('visibility', 'visible');
});

修改

具有类<div>的容器.orbit-wrapper由Orbit脚本动态生成，CSS visibility:visible;已经应用，因此它根本不会被CSS隐藏。脚本的动态DOM操作超出了CSS。

解决方案是将style="visibility:hidden;"应用于围绕所有内容的新包装器<div> ...

<div id="myWrapperDiv" style="visibility:hidden;"> <div id="featured"> <img src="http://dev.digitup.se/pilatessoder/wp-content/uploads/2011/08/pilates-soeder-bilder-2011-01.jpg" /> ... {snipped} ... </div> </div>

$(window).load(function(){ $('#myWrapperDiv').css('visibility', 'visible'); });

Answer 3

只需将div与display:none隐藏在div的样式标记中，然后运行所有JavaScript后，只需将其更改回display:block。

使用jQuery，只需在$(".orbit-wrapper").show();代码块中加载页面后即可$(document).ready(function() { ... });。

当页面加载到中心时，Wrapper Div故障/正在移动

3 个答案: