如果语句在调整大小时有效，则未准备好

If statement works on resize, not ready?

本文关键字：未准备 准备好 有效 小时 语句 调整 如果      更新时间：2023-09-26

我想完成两件事:

  1. 主内容div将动态调整大小以适合窗口的精确高度。我用这个函数实现了这个目标:

    $(document).on( 'ready', function() {
    panelsResize();
    $(window).on( 'resize', panelsResize );
});
function panelsResize() {
    var screenHeight = $(window).height();
    var screenWidth = $(window).width();        
    if (screenWidth > 768) {
        $( ".panels" ).css( "height", screenHeight );
    }
};

类.panels应用于主内容区。

这个很好用。

  • 我正试图用.large中的图像填充.panels。这些图像需要保持长宽比，同时可伸缩。我的代码基于这个答案。

    • 这个可以工作，但不是on ready。我必须调整屏幕大小，在将.large的显示切换为none的媒体查询下面。当我调整大小到更高的媒体查询，切换显示块，功能工作完美。

    任何想法?

    下面是函数(和标记): 
        $(document).on( 'ready', function() {
        bgResize();
        $(window).on( 'resize', bgResize );
    });
    function bgResize(){
        $( '.large' ).each(function() {
        var th = $(window).height(),//box height
            tw = $(window).width(),//box width
            im = $(this).children('img'),//image
            ih = im.height(),//inital image height
            iw = im.width();//initial image width
        if  ( iw < tw ) {
            im.css( { "width" : "100%", "height" : "auto" } );
        } 
        else if ( ih < th ) {
            im.css( { "height" : "100%", "width" : "auto" } );
        }
        var nh = im.height(),//new image height
            nw = im.width(),//new image width
            hd = (nh-th)/2,//half dif img/box height
            wd = (nw-tw)/2;//half dif img/box width
        if (nh<nw) {
            im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
        } else {
            im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
        }
    });
};

    这是HTML: 

        <ul id="homePanels">
        <li id="cat1" class="panels">
            <div class="large">
                <img src="#" alt="" />
            </div>
            <div class="small">
                <img src="#" alt="" />
            </div>
        </li>
    </ul>
    CSS: 

    #homePanels {
    list-style: none;
    margin:0;
    padding:0;
    overflow: hidden;
}
.large {
    width:100%;
    height:100%;
}
@media (min-width: 768px) { 
    .large{display: block;}
    .small{display:none}
}
@media (max-width: 768px) {
    .small {display:block;}
    .large {display:none;}
}

    我想如果你使用jQuery ready()函数，它会起作用的。

    $(document).ready(function() {
    bgResize();
    $(window).on('resize', bgResize );
 });

    你只需要改变

    $(document).on( 'ready', function()


    $(document).ready( function()

    谢谢!我对ready事件进行了更改。

    我意识到使用图像的宽度和高度导致了这个问题，因为我基本上是抓取了两个0。因为我知道图像的长宽比，我用它来缩放屏幕调整大小的图像。

        var screenHeight = $(window).height(),
        screenWidth = $(window).width(),
        aspectRatio = 0.57066014669927,
        screenAspectRatio = screenHeight / screenWidth;
    if ( screenAspectRatio < aspectRatio ){
        $("img").css({"width" : "100%" , "height" : "auto"});
    } else if ( screenAspectRatio > aspectRatio ){
        $("img").css({"width" : "auto" , "height" : "100%"});
    }

    但现在问题解决了。谢谢你的帮助!

    相关文章：