Здравствуйте!
На сайте есть большая картинка, она долго грузится и хотелось бы ускорить ее загрузку с помощью CSS.
Я читал про два способа давно, но не помню как их реализовать.
Первый это когда есть нормальная картинка и эта же картинка тока худшего качества и когда человек заходит на сайт, то сначала грузится плохая картинка, а потом нормальная.
Второй это когда картинка загружается как бы кубиками отдельными, но не уверен.
Скажите пожалуйста, как их реализовать с помощью CSS? Есть ли еще способы ускорить открытие картинки?
Заранее спасибо!
отвечает ETNO
Довольно интересный вопрос, хотя и не часто используется.
Итак, для начала, вы правы, где-то встречал тоже способ вставки сначала изображения плохого качества, а потом при загрузке, которое заменяется хорошим. Способ прост, он использует javascript, но говорят, что старые браузеры его не воспринимают. Вот его код
<img src="lowess.jpg" onload="this.src='high.jpg';" />
lowess.jpg — это изображение плохого качества, оно загружается первым. high.jpg — хорошее качество, оно сразу заменяет первое, как только загрузится.
Также, если проблема именно в jpg файлах, то в этом формате есть способ сжатия, когда изображения «разворачивается» постепенно — этот способ называется Progressive.
В фотошопе, когда вы сохраняете изображение вы можете сохранить именно с этим способом
Просто поставьте галочку на progressive.
Также есть еще jquery плагины, которые добавляют к изображениям картинку загрузки (похоже как на флеш). Можете глянуть статью .
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи: