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

Question

У меня есть галерея продуктов, в которой изображения продуктов будут получены с сервера и показаны. Требуется некоторое время, чтобы все изображения были извлечены и отображены. Я хочу показать изображение загрузки, пока изображение не будет отображено с сервера.

Я попытался, как показано ниже, предоставив условие if для отображения загружаемого изображения, пока тег изображения не получит свой источник. Но это не работает, так как он просто показывает пустое пространство, пока изображение не будет получено с сервера.

if($image)
    {?>
    <img  style='Max-width:180px;'  alt="Nike Women Sweet Classic High Purple Casual Shoes" src="<?echo $image;?>"><?
    }
    else
    {?>
<img  style='Max-width:180px;'  alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
<?
}

Пожалуйста, скажите мне, как я могу заставить это работать как ожидалось

Answer 1

Что ж, вам придется использовать JavaScript для обновления DOM так, как вы хотите, так как PHP будет обрабатывать страницу только один раз.Это означало бы переключение на AJAX для извлечения изображений, и это выглядит как перебор для вашего сценария.Вместо этого, почему бы не дать каждому изображению свой собственный контейнер, а затем дать этому контейнеру класс с загрузочным изображением в качестве фона?Затем.после загрузки изображения оно отображается поверх предыдущего загрузчика.

Answer 2

Поскольку lowsrc устарело, мой лучший следующий выбор - Lazy Loading.

Это означает, что вы загружаете только изображения, которые можно увидеть на экране прямо сейчас, а не изображения, которые браузер выбирает для загрузки, которые могут быть внизу страницы.

Если вы используете JQuery, посмотрите на плагин LazyLoad . На этот раз определенно пойдем вперед:)

Предлагаемая реализация

Вы бы загрузили плагин jquery и напишите свои изображения так:

<img data-original="<?php echo $image; ?>" src="media/images/snake.gif">

и пусть плагин сделает тяжелую работу

Надеюсь, это поможет!

Answer 3

Я думаю, вы предлагаете асинхронную загрузку изображения - вы можете использовать JavaScript для этого.В качестве альтернативы вы можете попробовать применить фоновое изображение к контейнеру для каждого дочернего изображения.

<div style="background-image: ;">
    <img />
</div>

Answer 4

Я думаю, это то, что вам нужно: http://jqueryfordesigners.com/image-loading/.

Answer 5

Вы не можете сделать это на стороне сервера в одиночку. Сначала нужно загрузить простые изображения «змей» на стороне php:

<img  style='Max-width:180px;'  alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">

, а затем через javascript (ajax Requets) обновите все изображения следующим образом:

// populate imageList
$.ajax({
   url: 'your_server_script',
   data: imageList,
   success: function(response) {
      // update teh src property for the images here usign your server response
   }
})

Как указывал @ranksrejoined, вам, возможно, было бы лучше использовать css для предоставления изображениям контейнера с widht / height и фоновым изображением. Тогда это переопределяется самим изображением.