而循环仅在本地打开网页时有效

While loop only works when webpage is opened locally

本文关键字：网页 有效 循环      更新时间：2023-09-26

我编写了一个函数，确保图像在水平和垂直方向上都足够大，可以填充其父元素，为此我使用了while循环。当我在本地计算机上打开index.html文件时，它加载良好，但一旦我将其上传到服务器并尝试访问它，页面就永远不会加载。

这是Javascript：

$(document).ready(function() {
     initialize();
}
function initialize() {
    $("[data-type='parallax']").each(function() {
         $(this).css('height', $(this).parent().height());
         while (($(this).height() < $(this).parent().height()) || ($(this).width() <  $(this).parent().width())) {
              $(this).css('height', '+=1px');
         }
    });
}

有人知道为什么会这样吗？我知道这是while循环，我只是不明白为什么它在本地工作。有没有一种更简单的方法可以用CSS来处理这个问题，在CSS中，图像至少和父元素一样高和宽，但只有它需要的那么大。

您可以使用animate，检查这个Fiddle代码：

<script type="text/javascript">
$(document).ready(function() {
     initialize();
})
function initialize() {
    $("[data-type='parallax']").each(function() {
        var wi=$(this).width()
        var he=$(this).height()
        var pW=$(this).parent().width()
        var pH=$(this).parent().height()
        if(wi<pW||he<pH){
            $(this).animate({'width':pW+'px','height':pH+'px'},1000)
            } 
    });
}   
</script>
相关文章：