jqueryを使用してさまざまなサイズの画像をモバイルタブレットとデスクトップ解像度で表示

Question

私は、ページのリロード/リフレッシュ時にシャッフル機能を備えた全幅のバナー画像用にVegasスライドを使用しています。

トリプル、タブレット、モバイルのように3つの異なるサイズのクロップされた画像を1つの変数に設定するにはどうすればよいですか。

以下は私のコードですが、私は以下のコードを使用しています。機能を同時に呼び出すのは、達成するのが良い方法ではないと思います。誰でも私に良い解決策を提案します。

// 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 
    }); 
})