onresize 仅加载一次

Question

我正在尝试同时使用媒体查询和 JS。所以我需要对 4 种情况使用调整大小功能。 对于每种情况，我都需要删除图片，因此我必须在调整大小时以动态方式删除它们。 我有 4 个范围：1800+ - 1024 || 1024 - 640 || 640-320 || 320- 问题是即使分辨率在范围内，该功能也会启动并重新启动。 所以我想检测该功能何时启动，然后停止。 这是我所做的：

$(window).on('resize', function() {

  // Mosaic > 1024px
  var screenW = $(window).width();
  if (screenW > 1024) {
    var size = true;
    ....
  }
  if (screenW < 1024 && screenW > 640) {
    ...
  }
  ...
}

我不知道在检测到 size = true 时如何停止调整大小..

编辑： 谢谢大家！我现在有这个代码

function checkSize()
{
    var container = jQuery('#test');
    var screenW = jQuery(window).width();
    console.log(screenW);

    if (screenW > 1800 && current != 1800)
    {
        container.empty();
        jQuery('div#test').append("1800+\n") ;
        console.log('1800');
        current = 1800;
    }
    else if (screenW < 1024 && current != 1024)
    {
        container.empty();
        jQuery('div#test').append("1024+\n") ;
        console.log('1024');
        current = 1024;
    }
    else if (screenW < 640 && current != 640)
    {
        container.empty();
        jQuery('div#test').append("640+\n") ;
        console.log('640');
        current = 640;
    }
    else if (screenW <= 320 && current != 320)
    {
        container.empty();
        jQuery('div#test').append("320+\n") ;
        console.log('320');
        current = 320;
    }

}

而且我离我想要的错误也不远了，它工作得很好。例如 screenW This this fiddle..

Answer 1

编辑 您需要在加载时执行一次，然后在每次调整大小时执行它，但前提是您更改范围。 这是一个代码示例：

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    div#test {
        white-space:pre ;
    }
    div#minis {
        font-size:0 ;
    }
</style>
<div id="minis">
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
    <img src="https://lh6.googleusercontent.com/-LCEFh9RLZxk/AAAAAAAAAAI/AAAAAAAABwU/cIReqRyZR54/photo.jpg" width="50" />
</div>
<div id="test"></div>

Javascript：

var current = null ;

function checkSize()
{
    var screenW = jQuery(window).width() ;

    if ( screenW > 1800 && current != 1800 )
    {
        // Do what you need to do for 1800+
        jQuery('div#test').append("1800+\n") ;
        showImages(10) ;
        current = 1800 ;
    }
    else if ( screenW > 1024 && screenW <= 1800 && current != 1024 )
    {
        jQuery('div#test').append("1024/1800\n") ;
        showImages(8) ;
        current = 1024 ;
    }
    else if ( screenW > 640 && screenW <= 1024 && current != 640 )
    {
        jQuery('div#test').append("640/1024\n") ;
        showImages(6) ;
        current = 640 ;
    }
    else if ( screenW > 320 && screenW <= 640 && current != 320 )
    {
        jQuery('div#test').append("320/640\n") ;
        showImages(4) ;
        current = 320 ;
    }
    else if ( screenW <= 320 && current != 0 )
    {
        jQuery('div#test').append("320-\n") ;
        showImages(2) ;
        current = 0 ;
    }
}

function showImages(number)
{
    var i = 1 ;
    jQuery('div#minis img').each(function(){
        if ( i > number ) jQuery(this).fadeOut() ;
        else jQuery(this).fadeIn() ;
        i++ ;
    }) ;
}

jQuery(window).resize(checkSize) ;
jQuery(document).ready(checkSize) ;

看看小提琴，看看它是否像你想要的那样工作： http://jsfiddle.net/HCc6E/2/

上一个答案 --------- 如果你真的希望它只被执行一次，你可以尝试 jQuery(window).off('resize') 而不是 var size = true。但我不明白为什么你不能只在你的情况下使用媒体查询：你能显示更多的代码或小提琴吗？