1. Фоновое введение
В онлайн -приложении фотоальбома самая простой необходимость просмотреть фотографии. Когда сеть медленнее, время ожидания просмотра фотографий является относительно длинным, а пользовательский опыт будет очень плохим.
2. Текущая ситуация
Есть два основных способа загрузки фотографий:
(1) Самый оригинальный способ напрямую загружать и отображать фотографии на странице HTML с тегом IMG. Этот метод будет иметь пустой процесс ожидания, когда скорость сети будет медленной или отображаемые фотографии относительно велики, а пользовательский опыт будет плохим.
(2) Сначала используйте тег IMG, чтобы загрузить миниатюру фотографии, чтобы отобразить фотографию на странице HTML, а затем используйте JavaScript для загрузки исходного изображения скрытого фото, и подождите, пока не будет загружено большое изображение фотографии перед отображением исходного изображения на страницу. Ниже приведена блок -схема:
3. наше решение
Некоторые из методов оптимизации, недавно изготовленных с помощью QQ Photo Album, решили недостатки двух методов апелляции и соответствовали потребностям пользователей для просмотра фотографий: см. Общую ситуацию фотографий как можно скорее и увидеть ясное оригинальное изображение как можно быстрее. Этот метод использует миниатюры и исходные изображения для одновременной загрузки и наложения отображения. Во -первых, загрузите миниатюры и разверните дисплей, и большое изображение накладывается на миниатюры и нагрузки одновременно. Миниатюра очень мала и обычно позволяет пользователям быстро видеть размытое изображение. Во время загрузки большого изображения миниатюра постепенно покрывается сверху вниз, так что пользователь может видеть большое изображение в процессе загрузки.
(1) Пример диаграмма
Как показано выше, этапы обработки этого метода:
1). Получите URL -адрес фото миниатюры и оригинального изображения и получите длину и ширину фотографии;
2). Загрузите и отобразите миниатюры фото и растягивайте миниатюры в соответствии с длиной и шириной фильма. В настоящее время пользователь видит размытый эффект;
3). Загрузите и отобразите оригинальную фотографию, нагрузите исходное изображение на миниатюре, чтобы отобразить его. Исходное изображение будет отображаться так же, как и загружается. Если он не загружен, он все равно будет отображать миниатюру. Постепенно перезаписать миниатюру. Во время процесса загрузки исходного изображения пользователь видит эффект градиента фотографии от Blur до очистки.
4). После того, как исходное изображение загружено, исходное изображение перезаписывало миниатюры, и пользователь видит реальное исходное изображение. В настоящее время вы можете скрыть миниатюры, чтобы миниатюры не мешали отображению изображений с прозрачными эффектами, такими как PNG или GIF.
(2) Пример кода
<!-Установите размер фотографии-> <div> <!-Маленькая картина отображается в большом размере-> <img src = "small_url"/> <!-Исходное изображение наложено на маленькую картину-> <img src = "big_url"/> </div>
Вышеуказанное - все содержание этой статьи. Для получения дополнительной информации о JavaScript вы можете проверить: «Справочный учебник JavaScript» и «Руководство по стилю кода JavaScript». Я также надеюсь, что все будут поддерживать Wulin.com больше.