Question

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no;">
    <link rel="stylesheet" media="screen" href="style/master.css">
    <link rel="stylesheet" media="only screen and (max-width:420px)" href="style/master420.css">
</head>
<body>
    <div id="logo">
        <img src="images/bottom-01.svg" id="logobottom">
        <img src="images/top-01.svg" id="logotop" class="logotop">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(function(){
            $("#logo").fadeIn(500);
            var logoTop = ($(window).outerHeight() - $("#logotop").height())/2;
            $("#logo").css("margin-top",logoTop);
            $(window).resize(function(){
                $("#logo").css("height","auto");
                var logoTop = ($(window).outerHeight() - $("#logotop").height())/2;
                $("#logo").css("margin-top",logoTop);
            });
        });
    </script>
</body>
</html>

当我在浏览器上打开我的硬盘驱动器时，这个网站和这个脚本工作得很好但是当我将它上传到主机（GoDaddy）时，它会间歇性地工作。为什么网站会在硬盘上运行但在上传到主机后无法正常工作？

Answer 1

我的猜测是图像仍在加载，因此计算的高度是错误的。尝试将代码封装在$（窗口）.on（＆＃39; load＆＃39;，function（）{...}）中，以强制它等待图像完全加载。

这看起来像这样：

    window.on('load', function(){
        $("#logo").fadeIn(500);
        var logoTop = ($(window).outerHeight() - $("#logotop").height())/2;
        $("#logo").css("margin-top",logoTop);
        $(window).resize(function(){
            $("#logo").css("height","auto");
            var logoTop = ($(window).outerHeight() - $("#logotop").height())/2;
            $("#logo").css("margin-top",logoTop);
        });
    });

不是答案的一部分，但您也可以使用.trigger('resize')来优化脚本的大小：

    window.on('load', function(){
        $("#logo").fadeIn(500);
        $(window).resize(function(){
            $("#logo").css("height","auto");
            var logoTop = ($(window).outerHeight() - $("#logotop").height())/2;
            $("#logo").css("margin-top",logoTop);
        }).trigger('resize');
    });

jQuery在上传到主机时间歇性地加载

1 个答案: