刷新时更改背景，但响应更快
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了刷新时更改背景，但响应更快相关的知识，希望对你有一定的参考价值。
我目前在我的head标签中有这个javascript代码，每次刷新页面时都会更改背景。它很棒，但是，我希望有不同的“图像集”（1.png，2.png，3.png vs 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>
答案
`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] +')';
}
}
另一答案
工作实例
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;另一答案
您可以使用可用作背景的不同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文件中。
编辑：
<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"/>
这样的事情。
另一答案
您可以通过检查设备是移动设备还是桌面设置来设置背景图像。
例如：
我目前在我的head标签中有这个javascript代码，每次刷新页面时都会更改背景。它很棒，但是，我希望有不同的“图像集”（1.png，2.png，3.png vs 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>
以上是关于刷新时更改背景，但响应更快的主要内容，如果未能解决你的问题，请参考以下文章
每 2 秒刷新一次从 JSON 响应中填充的 listView