Javascript / jQuery运行速度太快 - 适用于重新加载页面 [英] Javascript/jQuery runs too fast - works on reloading page
问题描述
我正在建立一个液体网站。如果你在其中使用一些图像，那就太糟糕了。 IE有问题，或FF或Chrome。
我再次遇到问题。基本上，我在运行时通过javascript构建网站。我将首先设置宽度。之后，我设置主容器的高度。 （否则会出现图像突破问题）。
现在我的问题是：如果我在本地执行网页，它会在所有3浏览器。如果我在线执行它，它不会设置主容器（包含所有内容）的高度。
（var wrapperHeight = objLogo.offsetHeight; - >返回0）
如果我刷新网页，一切看起来都正常，上面一行返回有效高度。 ..
我用这个和一个简单的jquery脚本一起翻转div（但是这是在我的简单脚本之后）。
注意： m使用一个相当大的背景图像在身体上，这是在css中设置的。
第二个音符：它只发生在Chrome ...
代码：
< head>
< title>< / title>
< link rel =stylesheethref =css / default.csstype =text / css/>
< script type =text / javascriptsrc =scripts / jquery-1.3.2.js>< / script>
< script type =text / javascriptsrc =scripts / jquery.quickflip.js>< / script>
< script type =text / javascript>
$（'document'）。ready（function（）{
//获取内部宽度/高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//获取主容器的宽度
var wrapperWidth = schermBreedte * 0.641;
//在主容器中获取左右div的宽度
var totalWrapperWidth = wrapperWidth - 40;
var widthLeft = totalWrapperWidth * 0.345;
var widthRight = totalWrapperWidth * 0.655;
//获取元素
var objOrange =文档.getElementById（'orange'）;
var objGreen = document.getElementById（'green'）;
var objFliptabs = document.getElementById（'flip-tabs'）;
var objLeft = document .getElementById（'left'）;
var objRi ght = document.getElementById（'right'）;
var objContent = document.getElementById（'content'）;
var objLogo = document.getElementById（'main_logo'）;
var objV_line = document.getElementById（'v_line'）;
//设置主容器（objOrange& ObjGreen是用于翻转jquery脚本的两个主容器，它们实际上放在彼此之上（参见上面的jquery ref和脚本）
objOrange。 style.width = wrapperWidth +px;
objGreen.style.width = wrapperWidth +px;
objFliptabs.style.width = wrapperWidth +px;
//设置左边和右边的div
objLeft.style.width = widthLeft +px;
objRight.style.width = widthRight +px;
/ /这个标志放在左边的div中，实际的主容器高度是通过设置宽度
后获得这个标志的高度来确定的objLogo.style.width =（widthLeft-20）+px;
//右边的div被分成两部分：一个包含6个图像的顶部和一个包含1个图像的底部， objectContent指向底部，因为通过设置6个图像的宽度来动态设置顶部高度％b $ b objContent.style.width = widthRight +px;
//通过获取图像的高度来获取主容器的高度（我们早先设置了图像的宽度 - 请参阅上面 - 以便按比例缩放）
var wrapperHeight = objLogo.offsetHeight;
//设置主容器的高度
objOrange.style.height = wrapperHeight +px;
objGreen.style.height = wrapperHeight +px;
//设置左边div旁边1px行的高度
objV_line.style.height = 100 +％
//获取高度的内容div（=第二个和右边div的底部div）
var contentHeight = wrapperHeight * 0.445;
//设置高度
objContent.style.height = contentHeight +px;
//另一行
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）;
返回false;
}）;
}）;
}）;
< / script>
< / head>
看起来您需要等待运行该代码直到图像被加载，以便它们的尺寸已知，因此高度可以被正确计算。
尝试使用这个jQuery插件：
https://github.com/desandro/imagesloaded
$（document）.ready（function（）{
$（'＃my-image-container'）。imagesLoaded（function（） {
/ *您的代码在这里* /
}）;
}）;
I'm building a liquid website. It's been a hell if you work with some images in it. Either IE has an issue, or FF or Chrome.
I'm having an issue again. Basicly I'm building the website at runtime trough javascript. I'm setting the width first of everything. After that I'm setting the height of the main container. (otherwise there are breakout issues with the images).
Now my issue is: if i execute the webpage locally it works in all the 3 browsers. If I execute it online it doesn't set the height of the main container (which contains everything). (var wrapperHeight = objLogo.offsetHeight; -> returns 0)
If I refresh the webpage, everything looks normally and the above line returns the valid height... I'm using this together with a simple jquery script to flip divs (however this comes after my simple script).
Note: also I'm using a rather big background image on the body, this is set in css.. 2nd note: it only occurs in Chrome...
Code:
<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>
It looks like you need to wait to run that code until the images are loaded so that their sizes are known and so the height can be calculated correctly.
Try using this jQuery plugin:
https://github.com/desandro/imagesloaded
$(document).ready(function() {
$('#my-image-container').imagesLoaded(function() {
/* your code here */
});
});
这篇关于Javascript / jQuery运行速度太快 - 适用于重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
