javascript - While循环仅在本地打开网页时有效

我编写了一个函数，以确保图像在水平和垂直方向上都足够大以填充其父元素，为此，我使用了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图像的高度和宽度至少与父元素一样高，但仅与所需元素一样大。

最佳答案

您可以使用动画，请选中此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>