Question

嘿家伙我正在尝试根据屏幕分辨率更改网页的功能。现在在某种程度上它工作正常，但问题是每次我更改分辨率时，整个功能必须再次渲染。比方说，如果我必须根据屏幕大小加载不同版本的图像，并且我在中等大小，如果我调整大小并且我仍处于中等分辨率，则图像必须重新加载。现在我正在使用$(window).resize(checkMedWidth);但是如果我的中等大小，必须有一些方法来获得加载。我的代码是

$(document).ready(function() {

// Optimisation: store the references outside the event handler:
var $window = $(window);

var currentWindowSize;

var flagIs;
$(window).resize(function () {
    currentWindowSize = $window.width();
    if (currentWindowSize >= 0 && currentWindowSize <= 999) {
        $('body').css('background-color', 'red');
        flagIs = "low";

    }
    else if (currentWindowSize >= 1000 && currentWindowSize <= 1336) {

        $('body').css('background-color', 'green');
        flagIs = "high";
        }

});

Answer 1

$(document).ready(function() {

// Optimisation: store the references outside the event handler:
var $window = $(window),
    currentWindowSize,
    flagIs,
    flagWas = '';

function res() {
    currentWindowSize = $window.width();

//set flag string to LOW if...    
if (currentWindowSize <= 999) {
    flagIs = "low";
}
//set flag string to HIGH if...
else if (currentWindowSize >= 1000 && currentWindowSize <= 1336) {
    flagIs = "high";
}
// on first call function compare zero string flagWas and current string (for example) 'low'
//on other calls function will compare current string and the past string
// if they are different (it happens if user change browser window width AND new window width walk into different width interval) or ( on the first iteration past string = '' and new string =/= '' (just containsa some string, for example 'low' ))
if (flagIs != flagWas)
{
        // if new string is low - so change css to low setting
       if (flagIs == 'low') {
           $('body').css('background-color', 'red');
       }
        // if new string is high - so change css to high setting
       else if (flagIs == 'high') {
           $('body').css('background-color', 'green');
       }
        //after we done with all this just write our present flagString to pastString (so we can use it later for compare like we did it before, variables are global, so we can access them from one iteration to another)
       flagWas = flagIs;
}
}

// Execute function on load
res();

// the same function will be execute each time we resize window
$(window).resize(function () {
   res(); 
});
});

这里有JSFiddle link
老实说 - 我的第一个答案中的代码更好，它也解决了你的任务。：）

Answer 2

将您的功能 checkLowWidth 和 checkMedWidth 合并为一个并使用标志。
例如： flagWas 和 flagNow 。

页面加载检查窗口分辨率
例如它是med，所以flagWas ='med';
关于窗口分辨率的更改 - 检查它的新定义 - 例如它也是med，所以flagNow ='med'
检查flagNow = / = flagWas是否
在我们的例子中flagNow = flagWas ='med'所以什么都不做
并且，例如，如果flagNow ='low'，那么flagNow = / = flagWas然后更改sizes / classes / etc并且之后flagWas = flagNow（='low'）

代码：

$(document).ready(function() {

    // Optimisation: store the references outside the event handler:
    var $window = $(window),
        flagWas = '';

    function checkWidthTier() {
        var windowsize = $window.width(),
            flagNow;
        if (windowsize <= 1024)
        { flagNow = 'low'; }
        else if (windowsize >= 1025 && windowsize <= 2000)
        { flagNow = 'med'; }
        if (flagNow != flagWas)
        {
           $('body').removeClass(flagWas);
           $('body').addClass(flagNow);
           flagWas = flagNow;
        }
    }

    // Execute on load
    checkWidthTier();

    // Bind event listener
    $(window).resize(checkWidthTier);
});

CSS：

.low { background: red; }
.med { background: yellow; }

JSFiddle Example，我稍微更改了您的代码。

使用jQuery根据屏幕大小更改某些功能

2 个答案: