1

Приветствую.

Думаю, многие знают о том, как не красиво выглядит загрузка большого изображения. Оно загружается и отображается по кускам сверху вниз. Это не очень приятно, не очень красиво.

Конечно, есть прелоадеры и, возможно, другое решение, но вот в чем вопрос:

Как сделать так, чтобы изображение не отображалось на странице, пока оно полностью не загрузится?

То есть будет сначала отображаться страница с текстом, потому что она весит меньше и потом будут отображаться все изображения или сколько их там, но каждое из них будет показываться (отображаться) после того, как полностью загрузилось.

Помогите.

4
  • 1
    Так а чем вариант с lazyload не подходит вам?
    – br3t
    2 июл 2017 в 19:33
  • appelsiini.net/projects/lazyload
    – gmastrbit
    2 июл 2017 в 19:39
  • 1
    Если картинка одна или пускай несколько то по мне достаточно их сжать. А если большой список картинок то можно реализовать подгрузку картинок по событию scroll. 2 июл 2017 в 19:39
  • 1
    Ответ есть в моем вопрос ru.stackoverflow.com/questions/685804/… - там рабочий вариант
    – Cheg
    3 июл 2017 в 6:55

1 ответ 1

2

Используйте этот код:

var img = document.createElement('img');
img.src = your_photo_path; // здесь начинается загрузка изображения
img.onload = function() {
    // устанавливаем новое изображение в photo_wrap
    document.getElementById('photo_wrap').innerHTML = '<img id="your_photo" src="' + your_photo_path + '">';
}

Для начала мы создаем объект img и без изменения текущего DOM страницы загружаем в него изображение. После загрузки изображение попадает в кэш браузера и срабатывает img.onload, а далее много путей. В приведенном примере было загружен тег с изображением в контейнер для фотографии photo_wrap, но можно и просто менять атрибут src или грузить изображение в background.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.