2015-12-24 3 views
1

Я работаю над рельсами. На странице поиска отображаются все списки с изображениями, полученными с amazon s3. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что мой макет становится беспорядочным, пока все изображения не будут загружены полностью. Поэтому я помещаю образ заполнителя, и теперь проблема заключается в том, как заменить его, когда фактическое изображение загружается из s3. Как мы можем знать, что изображение полностью загружено и соответствующим образом изменить изображение? Заранее спасибо!положить изображение заполнителя до загрузки соответствующего изображения

ответ

3

Оформить заявку lazysizes или по слову «ленивая погрузка». Он делает именно то, что вам нужно, я верю.

UPDATE

Проверьте demo, например, раздел под названием 'Изображение с техникой LQIP'.

поэтому в основном тег изображения должен быть в настоящее время

<img src="placeholder-image.jpg" data-src="aws-image.jpg" class="lazyload" /> 

Этот тег изображения будет отображаться замещающим изображением в настоящее время. Файл javascript библиотеки автоматически загрузит изображение aws после прокрутки этого изображения и загрузки файла aws.

+0

все еще не могу понять, как это может помочь с моим сценарием. Мне нужно заменить образ заполнителя при загрузке фактического изображения. – Abhilash

+0

обновил мой ответ, надеюсь, что он помогает – Vic

+0

havent попробовал..Я нашел другой способ. вместо того, чтобы показывать заполнитель, я установил высоту и ширину для того, чтобы сохранить макет от взлома во время его загрузки. Затем я поместил фоновое изображение загрузчика .gif image .. Так мне не нужно удалять местозаполнитель с загрузчиком, поскольку он будет в фоновом режиме ..Не знаю, насколько эффективен, но теперь работает как шарм .. – Abhilash

Смежные вопросы