使用jQuery根据屏幕大小更改某些功能 [英] changing some functionality according to screen size using jQuery

问题描述

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

Hey guy I am trying to change the functionality of my web page according to screen resolution. Now to some extent it's working fine but the problem is that every time I change the resolution the whole functionality has to render again. Say for example if I have to load different versions of an image according to the screen size and I am on medium size, if I resize and I am still on medium resolution the images have to reload again. Now I am using $(window).resize(checkMedWidth); but there must be some way to get hld of loading if i am on medium size. my code is

$(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";
        }

});

推荐答案

$(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链接

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

AND here goes JSFiddle link
Honestly- code in my first answer was better, and it solve your task as well. :)

这篇关于使用jQuery根据屏幕大小更改某些功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！