рандомный фон из предложенных

[MasterP]

Необходимо сделать так, чтобы имг выбирался рандомно из предложенного массива. Сейчас это выглядит совсем криво:

<img src="bg/.png" id="main-bg"/>
<script>
var bg = ['bg/1.png', 'bg/2.png', 'bg/3.png', 'bg/4.png', 'bg/5.png', 'bg/6.png'], n
while(n == undefined){
  n = Math.round(Math.random()*7)
  if(n==0||n==7) n = undefined
}
document.getElementById('main-bg').src = bg[--n]
</script>

раздражает то, что пока скрипт грузится проходит полсекунды и заметно, как браузер сначала грузит пустую область (bg/.png - специально положил битую ссылку), а потом - нужную картинку на ее место. Это критично, т.к. положение остального содержимого страницы зависит от наличия/отсутствия картинки на этом месте.

Есть возможность вызвать появление тега img прямо из скрипта или как-то иначе сделать более логичным появление нужной картинки?

[Golgi]

конечно не знаю как по стандартам, но я бы попробывал хотя бы сделать так:

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

Либо, если хотите сделать так чтобы контент не съезжал, пока картинка грузится, нужно задать элементу в который загружается картинка изначально её размеры

[Быколай]

Имхо: я такие задачи предпочитаю решать на стороне сервера. В момент генерации страницы php-ыхой рандомно выбирать файл и определённой папки. + не придётся в скрипте указывать все файлы - функция сама выберет из всего что в папке.

[MasterP]

к сожалению, нет возможности реализовать на php.

[Int]

А чего у тебя скрипт без точек с запятой? Типа всё работает и не ругается? И зачем тот бешеный цикл с умножением на семь?

body {visibility:hidden;}

window.onload=function() {document.body.style.visibility='visible';}

Вот так можно сделать страницу невидимой, а потом видимой

var bg = ['bg/1.png', 'bg/2.png', 'bg/3.png', 'bg/4.png', 'bg/5.png', 'bg/6.png'];
var n=Math.floor(Math.random()*6);
var im=document.createElement('img');
im.setAttribute('src',bg[n]);
im.setAttribute('alt',''); //А это обязательно, валидатор требует
im.setAttribute('id','main-bg');
document.body.appendChild(im);    //Тут можно делать insertBefore, чтобы вставить туда, куда нужно

А так динамически добавлять