Question

我正在尝试在加载图像以使其完全适合其容器时运行JQuery脚本：

// On load...
$(window).on('load', function(){        
    // Center images on card        
    $('.card-container').find('.card-img-s, .card-img-m, .card-img-l').each(function(){            
        centerImage(this);            
    });
    
    // Center images on card when window resized        
    $(window).resize(function(){            
        $('.card-container').find('.card-img-s, .card-img-m, .card-img-l').each(function(){                
            centerImage(this);                
        });            
    });        
});

// Center images on thumbnail
function centerImage(imageContainer){        
    let image = $(imageContainer).find('img')[0];
    
    // If image height/width > container height/width, set class with max-width
    
    if($(image).height() / $(image).width() > $(imageContainer).height() / $(imageContainer).width()){            
        $(imageContainer).addClass('img-v');
        $(imageContainer).removeClass('img-h');            
    }        
    // Otherwise, set class with max-height        
    else{            
        $(imageContainer).addClass('img-h');
        $(imageContainer).removeClass('img-v');            
    }        
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这正常工作。但是在某个屏幕宽度以下，我有一个媒体查询，该查询将容器的宽度从固定宽度更改为屏幕的100％，从而更改了容器的高度/宽度比。

问题在于媒体查询更新容器宽度之前，JQuery似乎正在运行。它可以按预期大小调整窗口大小-仅在加载时脚本似乎使用了错误的（旧）比率。

如何确保我的脚本在页面完全加载后运行-媒体查询及其他所有内容？

Answer 1

您需要确保在加载所有文件（css /脚本）之后执行代码

要实现此目的，请将您的代码放入

$(function() {
 // code here
});

这并不意味着您的所有脚本都应该放在上述函数中。您可以像这样使用此功能：

$(function() {
 init()
});
var init = function(){
  //your jquery code which needs to run after the files are loaded(media query action is performed) goes here
}

媒体查询更新元素之前，JQuery正在运行

1 个答案: