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

嘿家伙我正在尝试根据屏幕分辨率更改我的网页的function。 现在在某种程度上它工作正常，但问题是每次我改变分辨率时，整个function必须再次渲染。 比方说，如果我必须根据屏幕大小加载不同版本的图像，并且我在中等大小，如果我resize并且我仍处于中等分辨率，则图像必须重新加载。 现在我使用$(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 = 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链接
老实说 - 我的第一个答案中的代码更好，它也解决了你的任务。 🙂

Answer 2

将函数checkLowWidth和checkMedWidth合并为一个并使用标志。
例如： flagWas和flagNow 。

1. 页面加载检查窗口分辨率
2. 例如它是med，所以flagWas =’med’;
3. 在窗口分辨率改变 – 检查它的新定义 – 例如它也将是med，所以flagNow =’med’
4. 检查flagNow = / = flagWas
5. 在我们的例子中flagNow = flagWas =’med’所以什么都不做
6. 并且，例如，如果flagNow =’low’，那么flagNow = / = flagWas然后改变大小/类/等，并且毕竟那个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示例 ，我稍微更改了您的代码。