javascript image rotator issue, default image

Question

Я написал простой ротатор изображений javascript, который выбирает случайное изображение на каждой загрузке страницы. Проблема в том, что если я использую изображение по умолчанию, это изображение по умолчанию будет отображаться на секунду до того, как javascript загрузит и заменит его. Очевидно, если кто-то отключил javascript, я хочу, чтобы они увидели изображение. Как я могу получить изображение по умолчанию без мерцания изображения по умолчанию.

Answer 1

Похоже, что вы хотите изменить HTML-страницу перед тем, как window.onload запустится (потому что в этот момент изображение по умолчанию уже отображается).

Вам необходимо прикрепить функцию javascript к событию «DOMContentLoaded» или обычно называемому domready. Дин Эдвардс предоставил нам фантастическую кросс-браузерную реализацию http://dean.edwards.name/weblog/2006/06/again/.

Надеюсь, что это поможет :)

Answer 2

Если вы скрываете изображение по умолчанию в качестве первой вещи, которую вы делаете при загрузке страницы, вероятно, у пользователей не будет возможности увидеть изображение. Затем вы можете установить обработчик onload на изображение и изменить его источник на случайное изображение. Когда изображение загружается, вы можете отобразить изображение.

window.onload = function() { 
    var img = document.getElementById("rotating_image"); 

    // Hide the default image that's shown to people with no JS 
    img.style.visibility = "hidden"; 

    // We'll unhide it when our new image loads 
    img.onload = function() { 
     img.style.visibility = "visible"; 
    }; 

    // Load a random image 
    img.src = "http://example.com/random" + Math.floor(Math.random() * 5) + ".jpg"; 

}; 

Answer 3

Возможно, вы также захотите рассмотреть возможность размещения JS сразу после изображения. Это может выполнять JS в точке, а не при загрузке страницы. Но я не уверен в этом.

<img src="/not/rotated/image.jpg" /> 
<script type="text/javascript"> 
// change image 
</script>