Question

我有一个id为'home'的部分。我有一些JS在页面加载时更改'home'部分的背景图像。

我总共有5张背景图片，我也有5张徽标图片。每个徽标都与特定的背景图像配对。如何更改代码以确保使用正确的背景图像加载正确的徽标？徽标必须以内嵌方式显示，因此实际上在HTML文档中。我尝试将徽标附加到一个名为“red-cherry”的容器中，但我的所有代码都断了。

我尝试这样做，但据我所知，我没有尝试检查已加载的背景图像。

JS

// Create an array of images
var images = ['a-pat.jpg', 'b.jpg', 'c-pat.jpg', 'd-pat.jpg', 'f-pat.jpg'];
var logos = ['cr-pink.png', 'cr-cherry.png', 'cr-green.png', 'cr-blue.png', 'cr-red.png'];

// Display one random one each time the page loads
$('#home').css({'background-image': 'url(../img/wallpaper/' + images[Math.floor(Math.random() * images.length)] + ')'});

$("h1.cherry-red").append({'<img src="../img/logos/' + logos[Math.floor(Math.random() * logos.length)] + '"/>')});

HTML

<section id="home">
    <h1 class="cherry-red"><span>Cherry Red</span></h1>
</section>

为清晰起见

我需要检查正在加载到#home的背景图像，然后将正确的徽标加载到H1。我需要以某种方式说a-pat.png是否作为背景图片加载只加载徽标cr-pink.png

进一步说明

我可以在我已经拥有的代码之后添加一堆if语句吗？例如：如果images ='a-pat.png'，则将cr-pink.png附加到H1，如果images = b.jpg，则将cr-cherry.png附加到H1，依此类推......这可能吗？

Answer 1

对两者使用相同的随机索引。

var images = ['a-pat.jpg', 'b.jpg', 'c-pat.jpg', 'd-pat.jpg', 'f-pat.jpg'];
var logos = ['cr-pink.png', 'cr-cherry.png', 'cr-green.png', 'cr-blue.png', 'cr-red.png'];

var rnd = Math.floor(Math.random() * images.length);

$('#home').css({'background-image': 'url(../img/wallpaper/' + images[rnd] + ')'});
$("h1.cherry-red").append('<img src="../img/logos/' + logos[rnd] + '"/>');

Answer 2

您只需要生成一次随机数：

// Display one random one each time the page loads
var imageNumber = Math.floor(Math.random() * images.length);
$('#home').css({'background-image': 'url(../img/wallpaper/' + images[imageNumber] + ')'});
$("h1.cherry-red").append({'<img src="../img/logos/' + logos[imageNumber] + '"/>')});

Answer 3

我曾经遇到过类似的问题而且处理方式不同。

我制作了一个包含div和图像的页面

pageimages.html

<div id="image1"><image src="myimage1.gif"></div>
<div id="image2"><image src="myimage2.gif"></div>
<div id="image3"><image src="myimage3.gif"></div>

然后我使用jquery加载图像，以便源页面缓存在服务器上。这比等待每个图像加载要快得多，或者担心预加载或任何事情。

$('#home').load('pageimages.html #image1');

或

$('#home').load('pageimages.html #image2');

将内嵌图像附加到H1

3 个答案: