Как показать загружающееся изображение, когда большое изображение загружается?
Вы проверили ldap-activerecord-gateway thoughtbot? Это могло бы быть что-то для Вас для рассмотрения...
http://github.com/thoughtbot/ldap-activerecord-gateway/tree/master
5 ответов
Вот базовая техника, которую вы можете расширить, чтобы делать более сложные вещи с помощью
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById( 'test' ).src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
Оберните ваше изображение в div (или как хотите) и установите его фоновое изображение в виде анимированного gif или любого другого загружаемого изображения, которое вы хотите. Когда изображение завершит загрузку, оно закроет фоновое изображение. Легко и может быть использовано где угодно.
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
Изменить: По-видимому, это устарело. Здесь не на что смотреть, двигайтесь дальше.
Для этого не требуется JavaScript или CSS. Просто используйте встроенное, но редко используемое свойство lowsrc для элементов img .
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
Основная идея состоит в том, что вы создаете дополнительный очень сжатый, возможно, черно-белый версия вашего нормального образа. Он загружается первым, и когда загружается изображение с полным разрешением, браузер автоматически заменяет его. Самое приятное, что вам не нужно ничего делать.
Проверьте это здесь: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
Вы можете использовать плагин jQuery Lazy Loading . Он позволяет указать загружаемое изображение и откладывает загрузку больших изображений до тех пор, пока они не появятся в поле зрения.
Некоторое время назад я сделал что-то вроде этого для аналогичной проблемы:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
Я думаю, что этот подход имеет некоторые полезные преимущества:
- Загружаемое изображение скрыто. Представьте, что ваше большое изображение не такое большое, как вы ожидали ...
- Вы можете делать некоторые дополнительные вещи с помощью функции javascript. В моем случае я растянул изображение по ширине, высоте или и того, и другого, в зависимости от его размера.