Добавить встроенное изображение в H1

Question

У меня есть раздел с идентификатором '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, а затем нагрузка правильный логотип t o H1. Мне нужно как-то сказать, если загружен-pat.png как фоновое изображение только нагрузить кр-pink.png

Дальнейшее объяснение логотип

Могу ли я добавить кучу если заявления после бита кода у меня уже есть? Например: Если images = 'a-pat.png', тогда добавьте cr-pink.png в H1 else, если 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

я когда-то была аналогичная проблема, и я обращался с этим по-разному.

Я сделал страницу с DIVS и изображения

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');