使用jquery在移动平板电脑和桌面分辨率显示不同大小的图像

Question

我正在使用拉斯维加斯幻灯片的全屏横幅图像与刷新功能页面刷新/刷新。

如何设置三种不同尺寸的裁剪图像，例如台式机，平板电脑和移动设备的单个变量。

下面是我的代码，我已经实现了使用下面的代码。但我同时调用函数，我想这不是很好的做法。任何人都会向我建议更好的解

// The Shuffle Function 
    function shuffle(o) { 
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
    }; 

    // Define backgrounds array 
    var bgimages = [{ 
     src: "images/dbg1.jpg" 
    }, 
    { 
     src: "images/dbg2.jpg" 
    }, 
    { 
     src: "images/dbg3.jpg" 
    }, 
    ] 

    var tabimages = [{ 
     src: "images/tablet/tbg1.jpg" 
    }, 
    { 
     src: "images/tablet/tbg2.jpg" 
    }, 
    { 
     src: "images/tablet/tbg3.jpg" 
    }, 
    ] 

    var mobimages = [{ 
     src: "images/mobile/mbg1.jpg" 
    }, 
    { 
     src: "images/mobile/mbg2.jpg" 
    }, 
    { 
     src: "images/mobile/mbg3.jpg" 
    }, 
    ] 

    var windowWidth = $(window).width(); 
    if ($(window).width() >= 1024) { 
    // Suffle the array 
    randombgs = shuffle(bgimages); 
    $("body").vegas({ 
     delay: 10000, 
     cover: true, 
     timer: false, 
     slides: randombgs 
    }); 
    } 

    if ($(window).width() >= 768) { 
    // Suffle the array 
    randomTbg = shuffle(tabimages); 
    $("body").vegas({ 
     delay: 10000, 
     cover: true, 
     timer: false, 
     slides: randomTbg 
    }); 
    } 

    if ($(window).width() <= 767) { 
    // Suffle the array 
    randomMbg = shuffle(mobimages); 
    $("body").vegas({ 
     delay: 10000, 
     cover: true, 
     timer: false, 
     slides: randomMbg 
    }); 
    } 

Answer 1

$(window).resize(function() { 
    var windowWidth = $(window).width(); 
    if ($(window).width() >= 1024) { 
    randombgs = shuffle(bgimages); 
    } else if($(window).width() >= 768) { 
    randomTbg = shuffle(tabimages); 
    } else { 
    randomMbg = shuffle(mobimages); 
    } 
    $("body").vegas({ 
    delay: 10000, 
    cover: true, 
    timer: false, 
    slides: randombgs 
    }); 
})