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

Question

我编写了一个函数来确保图像在水平和垂直方向上都足够大以填充它的父元素，为此我使用了一个 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 来解决这个问题，其中图像至少与父元素一样高和一样宽，但只有它需要的那么大。

Answer 1

你可以使用动画，检查这个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>