Как показать загружаемое изображение при загрузке большого изображения?
В качестве примера в Orkut при просмотре фотографии в фотоальбоме пользователя на фото будет загружено изображение загрузки, пока фото не будет полностью загружено.
Мне нужно реализовать эту функцию.
Мой вопрос в том, как реализовать эту функцию? Возможно ли использование JQuery?
Пожалуйста, помогите.
Вот базовая техника, которую вы можете расширить, чтобы делать более сложные вещи с помощью
<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);'/>
Я думаю, что этот подход имеет некоторые полезные преимущества: