Javascript / jQuery运行得太快 – 适用于重新加载页面

我正在建立一个流动的网站。 如果您使用其中的一些图像,那将是一个地狱。 IE有问题,或FF或Chrome。

我又遇到了一个问题。 基本上我是在运行时通过javascript构建网站。 我将宽度放在首位。 之后我设置主容器的高度。 (否则图像会出现突破问题)。

现在我的问题是:如果我在本地执行网页,它适用于所有3个浏览器。 如果我在线执行它,它不会设置主容器的高度(包含所有内容)。 (var wrapperHeight = objLogo.offsetHeight; – >返回0)

如果我刷新网页,一切看起来都正常,上面的行返回有效高度……我正在使用它和一个简单的jquery脚本来翻转div(但这是在我的简单脚本之后)。

注意:我也在身体上使用相当大的背景图像,这是在css中设置的。第二个注意:它只出现在Chrome中……

码:

      $('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; }); }); });   

看起来您需要等待运行该代码,直到加载图像以便知道它们的大小,因此可以正确计算高度。

尝试使用这个jQuery插件:

https://github.com/desandro/imagesloaded

 $(document).ready(function() { $('#my-image-container').imagesLoaded(function() { /* your code here */ }); }); 

当触发document.ready时,浏览器不一定在内存中具有图像以确定它们的高度/宽度。

一种选择是将resize逻辑放在$(窗口).ready()而不是$(document).ready()中。 两者之间的区别在于window.ready将等待加载所有内容。