проблема ротатора изображения javascript, изображение по умолчанию

Question

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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";

};