Javascript/jQuery 运行速度太快 - 适用于重新加载页面答案

【问题标题】：Javascript/jQuery runs too fast - works on reloading pageJavascript/jQuery 运行速度太快 - 适用于重新加载页面
【发布时间】：2011-11-17 01:12:37
【问题描述】：

我正在建立一个流动的网站。如果你在其中处理一些图像，那就太糟糕了。要么是 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>

【问题讨论】：

没有“太快”这回事！ =)

标签： javascript jquery html

【解决方案1】：

看起来您需要等到加载图像后才能运行该代码，以便知道它们的大小并正确计算高度。

尝试使用这个 jQuery 插件：

https://github.com/desandro/imagesloaded

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

【讨论】：

【解决方案2】：

当 document.ready 被触发时，浏览器不一定要将图像存储在内存中以确定它们的高度/宽度。

一种选择是将调整大小的逻辑放在 $(window).ready() 而不是 $(document).ready() 中。两者的区别在于 window.ready 会等待所有内容加载完毕。

【讨论】：