Как показать загружаемое изображение при загрузке большого изображения?

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

Мне нужно реализовать эту функцию.

Мой вопрос в том, как реализовать эту функцию? Возможно ли использование JQuery?

Пожалуйста, помогите.

Ответы

Ответ 1

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

<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>

Ответ 2

Оберните свое изображение в div (или что угодно) и установите его фоновым изображением как анимированный gif или любой другой загружаемый образ. Когда изображение закончит загрузку, оно закроет фоновое изображение. Легко и может быть повторно использовано везде, где вы хотите.

<div class="loading">
    <img src="bigimage.jpg" alt="test" />
</div>

CSS

.loading{
    background:transparent url(loadinggif.gif) center center no-repeat;
}

Ответ 3

Изменить: По-видимому, это устарело. Здесь ничего не видно, двигайтесь вперед.

Для этого не нужен JavaScript или CSS. Просто используйте встроенное, но редко услышанное, свойство lowsrc для элементов img.

<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">

Основная идея заключается в том, что вы создаете дополнительную очень сжатую, возможно, черно-белую версию вашего обычного изображения. Сначала загружается, и при загрузке изображения с полным разрешением браузер автоматически заменяет его. Лучшая часть - вам не нужно ничего делать.

Посмотрите здесь: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html

Ответ 4

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

Ответ 5

Время от времени я сделал что-то подобное для аналогичной проблемы:

<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. В моем случае я растянул ширину изображения, высоту или и то, и другое, в зависимости от его размера.