Проблема с ротатором изображений javascript, изображение по умолчанию
Я написал простой ротатор изображений javascript, который выбирает случайное изображение при каждой загрузке страницы. Проблема в том, что если я использую изображение по умолчанию, это изображение по умолчанию будет отображаться на секунду, прежде чем javascript загрузится и заменит его. Очевидно, что если у кого-то отключен javascript, я хочу, чтобы они видели изображение. Как я могу получить изображение по умолчанию без мерцания изображения по умолчанию.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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";
};
Вы также можете подумать о том, чтобы просто разместить JS сразу после изображения. Это может выполнить JS в момент, а не при загрузке страницы. Но я не уверен в этом.
<img src = "/not/rotated/image.jpg" />
<script type = "text/javascript">
// change image
</script>
Похоже, вы хотите изменить HTML-страницу страницы до запуска window.onload (потому что в этот момент изображение по умолчанию уже было отображено).
Вам необходимо прикрепить свою функцию javascript к «DOMContentLoaded» или обычно называемому событию domready. Дин Эдвардс предоставил нам фантастическую кроссбраузерную реализацию http://dean.edwards.name/weblog/2006/06/again/.
Надеюсь, это поможет :)