Лучший способ отображения изображения после его загрузки

В настоящее время я вижу, что мы можем показать изображение после его загрузки.Лучший способ отображения изображения после его загрузки

Первый подход

<img id="myImage" /> 

var img = new Image(), 
    x = document.getElementById("myImage"); 

img.onload = function() { 
    x.src = img.src; 
}; 

img.src = "http://somedomain/image.jpg";

Второй подход

<img id="myImage" src="http://somedomain/image.jpg" style="display:none" onload="showImage();" /> 

function showImage() { 
    document.getElementById("myImage").style.display = 'block'; 
}

Я немного запутался, какой из них является лучшим подходом? В некоторых примерах, которые я нашел в Интернете, они используют первый подход, но я вижу, что второй подход очень прост. Существуют ли какие-либо недостатки во втором подходе?

источник

2016-05-06 VJAI

Скажу сначала, используйте некоторое изображение «загрузка ...», а при загрузке фактического изображения замените его. – Tushar

Первый из них хорош, если у вас есть только одно изображение. Для нескольких изображений более подходящим является второй. Но насколько это касается производительности, я сомневаюсь, что есть какая-то разница, поскольку оба подхода используют 'onload' событие .. И да, используйте 'pre-loader' (' css'/light-weight gif) для лучшего UX, как предложено Tushar .. – Rayon

Другой подход может использовать атрибуты 'data-src' для хранения' src' изображений ..Цитирование через все изображения и установка 'src', когда изображение« загружено ». – Rayon

Первый подход лучше от повторного использования кода.

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

Второй подход лучше с точки зрения юзабилити.

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

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

источник

2016-05-06 06:25:02 gurvinder372

Отображение загрузочного изображения возможно только с использованием первого подхода rgt? Мы не хотим, чтобы событие загрузки было загружено для загружаемого изображения. – VJAI

@Mark Вы можете скрыть изображение по умолчанию и показать загружаемое изображение. Когда вызывается фактическая загрузка изображения, покажите то же самое и скройте изображение загрузки. Так что да, это можно сделать только при втором подходе. – gurvinder372

Событие @Mark Onload для изображения «загрузка» не должно повредить, так как этот подход предполагается использовать только для получения изображений, которые содержат изображения (а не изображения приложений, такие как удаление или значок стрелки). Кроме того, используя манифест сайта (кэш приложений), вы можете предварительно отфильтровывать те изображения, которые не являются содержимым. – gurvinder372

Первый подход в первую очередь.

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

Но у этого есть недостаток, ваши изображения не будут дружественными к SEO и не будут проходить стандартные тесты W3C, поскольку веб-боты не смогут сканировать ваши изображения в отсутствие источника img.

Второй подход показывает уже загруженное изображение, которое является более медленным процессом с точки зрения скорости загрузки документа, чем первый подход. Js играет с css здесь, который обычно используется для анимации отображения изображения.

В отличие от первого подхода, изображения оптимизированы для SEO, поскольку их можно обходить веб-пауками и индексировать.

источник

2016-05-06 06:44:48

Лучший способ отображения изображения после его загрузки

ответ

Смежные вопросы