изменить фон при обновлении, но отзывчивый

Question

В настоящее время у меня есть тег javascript в моем теге head, который позволяет менять фон при каждом обновлении страницы. это прекрасно работает, однако, я хотел бы иметь различные «наборы изображений» (1.png, 2.png, 3.png против 1mini.png, 2mini.png, 3mini.png), один для настольной версии и другой для мобильной версии. есть идеи как это сделать?

<script>
        function changeImg(imgNumber)   {
            var myImages = ["images/1.png", "images/2.png", "images/3.png", 
           "images/1mini.png", "images/2mini.png", "images/3mini.png" ]; 
            var imgShown = document.body.style.backgroundImage;
            var newImgNumber =Math.floor(Math.random()*myImages.length);
            document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';}
        window.onload=changeImg;
    </script>

Answer 1

Рабочий пример

    function changeImg(imgNumber) {

        var myImages = [{
                isMobile: true,
                image: "https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg"
            },
            {
                isMobile: false,
                image: "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            },
            {
                isMobile: true,
                image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTptDddyBZG4i4cycd6ZIBP2wT8PQKhihUqenZF7GpzlvTZuPghGQ"
            },
            {
                isMobile: false,
                image: "http://sfwallpaper.com/images/background-wallpaper-images-3.jpg"
            }
        ];

        var imgShown = document.body.style.backgroundImage;
        var filteredArray = [];
        if (isMobile()) {
            filteredArray = myImages.filter(function(el) {
                return el.isMobile == true;
            });
        } else {
            filteredArray = myImages.filter(function(el) {
                return el.isMobile == false;
            });
        }
        var newImgNumber = Math.floor(Math.random() * filteredArray.length);
        console.log("newImgNumber", newImgNumber);
        document.body.style.backgroundImage = 'url(' + filteredArray[newImgNumber].image + ')';
    }



function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if (match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}

window.onload = changeImg;

Answer 2

`You can go for some queries depending on your device viewport.`
    function changeBg(){
       var width = window.innerWitdh;
        var myImages = ["images/1.png", "images/2.png", "images/3.png", 
                       "images/1mini.png", "images/2mini.png", "images/3mini.png" ];
        if(width > 1200){ // lets say here is a desktop
          document.body.style.backgroundImage = 'url('+ myImages[1] +')';
        }else if(width < 1200 && width > 700){ // some smaller device
         document.body.style.backgroundImage = 'url('+ myImages[2] +')';
        }else { // this can be mobile
         document.body.style.backgroundImage = 'url('+ myImages[3] +')';
        }
    }

Answer 3

Вы можете использовать медиа-запрос с другим классом CSS, который можно использовать в качестве фона.

@media screen and (max-width: 768px) {
 .img1 {
  background-image: url("1.jpg");
 }
 .img2 {
  background-image: url("2.jpg");
 }
}

.img1 {
 background-image: url("3.jpg")
 }
.img2 {
  background-image: url("4.jpg");
 }

И изменить показанные классы с помощью функции.

Таким образом, у вас есть одна функция, и она реагирует на размер окна без каких-либо дополнительных методов - просто в файле CSS.

EDIT:

<script>
    function changeImg(imgNumber)   {
        var myImages = ["img1", "img2", "img3"]; 
        var newImgNumber =Math.floor(Math.random()*myImages.length);
        document.getElementByClassName(myImages[newImgNumber]).show();}
    window.onload=changeImg;
</script>

И вы положили display:none; в свой файл CSS. Таким образом, вы показываете только фон, который был «случайно» выбран.

<html>
   <div class='background'>
     <div class="img1"/>
     <div class="img2"/>
     <div class="img3"/>

Нечто подобное.

Answer 4

Вы можете установить фоновое изображение, проверив устройство мобильное или настольное.

Например:

В настоящее время у меня в теге head есть этот javascript-код, который позволяет изменять фон при каждом обновлении страницы. это прекрасно работает, однако, я хотел бы иметь различные «наборы изображений» (1.png, 2.png, 3.png против 1mini.png, 2mini.png, 3mini.png), один для настольной версии и другой для мобильной версии. есть идеи как это сделать?

<script>
        function changeImg(imgNumber)   {
            var mobileImages =["images/1mini.png","images/2mini.png","images/3mini.png"]; 
            var desktopImages = ["images/1.png", "images/2.png", "images/3.png"]; 

            var imgShown = document.body.style.backgroundImage;

            //this code will return true when device is mobile
            if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) { 
                var newImgNumber =Math.floor(Math.random()*mobileImages.length);
                document.body.style.backgroundImage = 
                                  'url('+mobileImages[newImgNumber]+')';  
            }else{
               var newImgNumber =Math.floor(Math.random()*desktopImages.length);
               document.body.style.backgroundImage = 
                                  'url('+desktopImages[newImgNumber]+')';
            } 
        }


}

        window.onload=changeImg;
 </script>