Javascript/jQuery运行太快——重载页面
Javascript/jQuery runs too fast - works on reloading page
我正在建立一个流动的网站。如果你在里面放一些图片,那简直就是地狱。IE或FF或Chrome有问题。
我又有问题了。基本上,我在运行时通过javascript构建网站。我首先要设置所有东西的宽度。之后,我设置主容器的高度。(否则图像会出现突发问题)。
现在我的问题是:如果我在本地执行网页,它在所有3个浏览器中都有效。如果我在线执行它,它不会设置主容器的高度(其中包含所有内容)。(var wrapperHeight = objLogo.offsetHeight;->返回0)
如果我刷新网页,一切看起来正常,上面一行返回有效的高度…我用一个简单的jquery脚本来翻转div(然而这是在我的简单脚本之后)。
注意:我还在正文上使用了一个相当大的背景图像,这是在css中设置的。第二个注意事项:它只发生在Chrome…
代码:<head>
<title></title>
<link rel="stylesheet" href="css/default.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.quickflip.js"></script>
<script type="text/javascript">
$('document').ready(function(){
//getting inner width/height
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//getting width for the main container
var wrapperWidth = schermBreedte*0.641;
//getting width for left and right div in main container
var totalWrapperWidth = wrapperWidth - 40;
var widthLeft = totalWrapperWidth*0.345;
var widthRight = totalWrapperWidth*0.655;
//getting elements
var objOrange = document.getElementById('orange');
var objGreen = document.getElementById('green');
var objFliptabs = document.getElementById('flip-tabs');
var objLeft = document.getElementById('left');
var objRight = document.getElementById('right');
var objContent = document.getElementById('content');
var objLogo = document.getElementById('main_logo');
var objV_line = document.getElementById('v_line');
//setting main container (objOrange & ObjGreen are 2 main containers used for the flip jquery script, they are actually placed above eachother (see jquery ref above and script beneath)
objOrange.style.width = wrapperWidth + "px";
objGreen.style.width = wrapperWidth + "px";
objFliptabs.style.width = wrapperWidth + "px";
//setting the left & right div
objLeft.style.width = widthLeft + "px";
objRight.style.width = widthRight + "px";
//this logo is placed in the left div. The actual main container height is determined by getting the height of this logo after setting the width
objLogo.style.width = (widthLeft-20)+"px";
//the right div is splitted into two pieces: a top which contains 6 images and a bottom which contains 1 image, the objectContent refers to the bottom as the top height is set dynamically by setting the width of the 6 images in %
objContent.style.width = widthRight + "px";
//getting the height for the main container by getting the height of the image (we've set the width of the image earlier - see above - so that it is scaled proportionally)
var wrapperHeight = objLogo.offsetHeight;
//setting the height of the main containers
objOrange.style.height = wrapperHeight + "px";
objGreen.style.height = wrapperHeight + "px";
//setting the height of a 1px line next to the left div
objV_line.style.height = 100 + "%"
//getting the height of the content div (=2nd and bottom div of the right div)
var contentHeight = wrapperHeight*0.445;
//setting the height
objContent.style.height = contentHeight + "px";
//another line
var length = parseInt(document.getElementsByTagName("div")["right"].offsetWidth) - 20;
var line = document.getElementById('hor_lijn');
line.style.width = lengte + "px";
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
});
</script>
</head>
看起来您需要等待运行代码,直到图像加载,以便他们的大小是已知的,因此可以正确计算高度
尝试使用这个jQuery插件:
https://github.com/desandro/imagesloaded$(document).ready(function() {
$('#my-image-container').imagesLoaded(function() {
/* your code here */
});
});
当文档。Ready被触发时,浏览器并不需要在内存中存储图像来确定它们的高度/宽度。
一个选择是把你的大小调整逻辑放在$(window).ready()中而不是$(document).ready()中。两者之间的区别就是那扇窗。Ready将等待所有内容加载。
相关文章:
- jQuery position()/offset()值在重载时出错(chrome)
- jquery和页面重载
- jQuery页面重载时淡出
- 使用jQuery捕获iframe重载
- jQuery如何在页面重载时保留动态创建列表的选定选项
- jQuery UI 运算符重载
- Jquery不工作(也许AJAX重载-或者只是语法不好?)
- jQuery的Not页面重载功能不起作用
- Jquery-Mobile:如何重载/刷新内部页面
- 页面重载和保留复选框与PHP和JQUERY
- 如何在Ember或Jquery中重载页面
- javascript和jquery中的方法和函数重载
- 如何在jQuery-UI Datepicker中重载数据
- 如何重载页面时使用jquery.计数器触发完成.多个实例的倒计时事件
- Javascript jQuery地图可重载
- JQuery Mobile #首页链接重载页面
- 是否有一种优雅的方法可以在插件内部重载jQuery方法?
- 防止页面重载jquery
- 如何重载Jquery或Javascript函数而不重载页面
- 重载jquery插件的回调函数