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>

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

1 个答案: