Cargando imágenes con CSS

7/Sep/2006 10651

Actualmente ha proliferado el uso de AJAX para cargar contenido sin necesidad de refrescar el browser. Se ha hecho mas fácil con el amplio abanico de toolkits existentes, fáciles de usar e integrar, y gratis. En este momento mostraré un truco para mostrar la carga de una imagen a través de un simple GIF animado; en realidad puede ser cualquier mensaje que estimes conveniente, siempre que sea una imagen liviana (no más de 2KB).

Lo que se hará es crear un estilo para el tag IMG, y dentro de este estilo poner de fondo el GIF que tendrá un cargando. Es importante que todas las imágenes que se carguen sean mayores que el mismo GIF; si no estás seguro de esto, mejor crea una clase para el IMG y utilízado en todas las fotos, por ejemplo (diferenciando fotos de imágenes…. fotos digo a por ejemplo, una galería de fotos). A continuación, el código de lo más simple:

img.foto {
   border: 1px solid #000;
   background: url("cargando.gif") no-repeat center center;
}

El borde es opcional, se lo puse solamente para delimitar la foto. En el tag IMG, utilicé una class="foto" para que el background de la misma sea un GIF animado que emula la progresión de una carga. Esto es útil para fotos pesadas, galerías por ejemplo. Para que este GIF esté centrado, nada más obvio que center center (centrado horizontal y vertical).

Ver resultado final.

Un interesante link, una página donde puedes crear tus propios indicadores en GIF animado.

Comentarios

  1. tại tiến lên miền nam miễn phí [#]

    Thanks on your marvelous posting! I definitely enjoyed reading it, you can be
    a great author. I will always bookmark your blog and may come back in the foreseeable future.
    I want to encourage you continue your great writing, have a nice day!

  2. JoreJeorkenia [#]

    essay writing service https://collegeessaylke.com/ – college essays us essay writers write my paper for me essay writers

  3. puctapassurse [#]

    argumentative essay write a paper free essay writer essaytypercom https://essaywritermsm.com/

  4. puctapassurse [#]

    help with writing an essay https://essaywritermsm.com/ – my homework essay hook generator argumentative essays https://essaywritermsm.com/

  5. Wxroha [#]

    over the counter ed pills that have viagra in them – medications that cause erectile dysfunction ed pills that work fast

  6. puctapassurse [#]

    how to write a essay https://essaywritermsm.com/ – writing essays write essay homework help https://essaywritermsm.com/

  7. NoictSocklic [#]

    argument essay write an essay for me essay rewriter homework online https://paperwriterkjd.com/ – do homework

  8. JoreJeorkenia [#]

    how to do your homework good homework help essaytypercom dissertation help online

  9. puctapassurse [#]

    buy dissertation online https://essaywritermsm.com/ – my homework help with writing paper essay writing buy essay paper

  10. NoictSocklic [#]

    essay assistance write essay for you paper help

  11. JoreJeorkenia [#]

    dissertation help https://collegeessaylke.com/ – how to write a paper how to write a good essay writing service buy an essay

  12. puctapassurse [#]

    samedayessay essay writer reviews writing essays college essay writing service https://essaywritermsm.com/ – buy cheap essay

  13. NoictSocklic [#]

    how to do your homework good https://paperwriterkjd.com/ essaybot paper help doing homework

  14. Feofanonw [#]

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

    http://panel.fontan-stroy.net.ua/
    http://glass.fontan-stroy.net.ua/
    https://www.fontan-stroy.net.ua/

    купить аквариум под заказ
    аквариум купить на заказ
    изготовление мебели для ванной комнаты на заказ
    столешница в ванную из искусственного камня
    панно стабилизированный мох
    угловой аквариум на заказ
    кортеновская сталь в украине
    строительство фонтанов
    изготовление мягкой мебели под заказ
    изготовление мягкой мебели на заказ харьков
    2b44_29
    столешница на кухню из искусственного камня
    изготовление кухонной мебели на заказ
    кварцевая столешница
    строительство пешеходного фонтана
    ландшафтный дизайн оформление

  15. Feofanvtr [#]

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

    http://panel.fontan-stroy.net.ua/
    http://aqua.fontan-stroy.net.ua/
    http://kamen.fontan-stroy.net.ua/

    столешницы из искуственного камня
    система вертикального озеленения
    вертикальное озеленение заказать
    строительство частных домов в киеве
    стабилизированный ягель
    столешница из камня цена
    панели из стабилизированного мха цена
    пузырьковая панель в квартире
    водно пузырьковая панель
    строительство каркасных домов в киев
    6638d4d
    пузырьковые панели водопады
    стабилизированный мох харьков
    ванная со стеклянной перегородкой
    аквариум под заказ киев
    изготовление ванной мебели заказ

  16. JoreJeorkenia [#]

    writing essay dissertation help write my essay generator doing homework https://collegeessaylke.com/ – narrative essay help

  17. BradleyTonuh [#]

    buy cialis online at lowest price cialis tadalafil portugal – buy cheap cialis uk
    generic cialis daily pricing

  18. puctapassurse [#]

    https://essaywritermsm.com/ research paper write an essay for me buy an essay buy dissertation paper

  19. NoictSocklic [#]

    buy essay paper https://paperwriterkjd.com/ narrative essay help homework online essay writing software

  20. JoreJeorkenia [#]

    essay writers online https://collegeessaylke.com/ essay help essay writer free writing essays

  21. gaseSerryhar [#]

    viagra pill buy viagra pills viagra prescription viagra price https://viagrasildenafils.com/ – viagra price

  22. Feofanljo [#]

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

    http://pool.fontan-stroy.net.ua/
    http://aqua.fontan-stroy.net.ua/
    http://land.fontan-stroy.net.ua/

    вертикальное озеленение стабилизированным мхом
    смарт стекло купить
    сталь кортен
    калькулятор ландшафтного дизайна
    строительство прудов и водоемов
    раздвижные стеклянные перегородки
    биокамины встраиваемые купить
    пруд бассейн на даче
    строительство пешеходного фонтана
    изготовление кухонной мебели на заказ
    006638d
    изготовление мебели под заказ киев
    проектирование и строительство фонтанов
    система вертикального озеленения
    строительство фонтанов
    пузырьковая панель с зеркалом

  23. puctapassurse [#]

    essay writers help with an essay online essay writer college essay https://essaywritermsm.com/ – how to write a paper in apa format

  24. NoictSocklic [#]

    i need help writing a paper for college best essay writer instant essay writer help me with my essay https://paperwriterkjd.com/ – essay writer

  25. Feofanbqp [#]

    Добрый день, я прямо тут насерфил уникальные web ресурсы для создания бизнеса, спешите перейти как другие создают капитал на
    уникальных супер темах пока ты ничего не делаешь.
    Список тут::

    http://aqua.fontan-stroy.net.ua/
    http://moss.fontan-stroy.net.ua/
    http://land.fontan-stroy.net.ua/

    сантехнические стеклянные перегородки
    аквариум под заказ киев
    строительство прудов и водоемов
    вертикальное озеленение киев
    столешницы из искусственного камня харьков
    аквариум на заказ киев
    природный ландшафтный дизайн
    пузырьковые панели на заказ
    настенные биокамины kratki
    строительство каркасных домов в киев
    38d4d7b
    биокамины встраиваемые в мебель
    строительство прудов цена
    кортеновская сталь киев
    вертикальное озеленение стоимость
    проектирование и строительство фонтанов

  26. EdiskJamiclaisE [#]

    viagra for men viagra for men viagra for sale

  27. Feofanxvo [#]

    Салют, я тут встретил интересные сайты для ведения бизнеса, поспешите узнать как другие колотят бабки на
    уникальных супер темах уже.
    Посмотри на это:

    http://glass.fontan-stroy.net.ua/
    http://stroim.fontan-stroy.net.ua/
    http://roof.fontan-stroy.net.ua/

    стеклянная перегородка в спальне
    стеклянные перегородки в интерьере
    стеклянная перегородка в спальне
    вертикальное озеленение стоимость
    стеклянная перегородка с дверью
    аквариум на заказ
    изготовление аквариумов под заказ
    стеклянные перегородки харьков
    пузырьковая аквапанель
    душевые перегородки на заказ
    3a00663
    изготовление мебели на заказ одесса
    стеклянные перегородки для зонирования комнаты
    стабилизированные цветы
    вертикальное озеленение днепропетровск
    картина из стабилизированного мха купить

  28. JoreJeorkenia [#]

    dissertation online help with writing paper online dissertation writing service help with writing paper https://collegeessaylke.com/ – essay typer

  29. Feofanwrs [#]

    Друзья, я тут накопал нестандартные веб ресурсы для бизнеса, поспешите узнать как другие делают капитал на
    уникальных бизне темах уже.
    Увидь это:

    http://smart.fontan-stroy.net.ua/
    http://aqua.fontan-stroy.net.ua/
    http://corten.fontan-stroy.net.ua/

    производители смарт стекол
    перегородки для душевой
    купить пузырьковая панель
    столешницы из искусственного камня днепр
    стабилизированный мох в интерьере
    вертикальное озеленение стабилизированным мхом
    стабилизированный мох в ванной
    проектирование ландшафтного дизайна
    изготовление мебели для кафе на заказ
    изготовление мягкой мебели на заказ
    d39103a
    пузырьковая панель цена
    строительство деревянных домов киев
    вертикальное озеленение искусственное
    изготовление детской мебели под заказ
    вертикальное озеленение в квартире

  30. Feofanwut [#]

    Рад Вас видеть на этом сайте, я прямо здесь накопал прибыльные web сайты для своего дела, поспешите узнать как другие создают капитал на
    уникальных направлениях прямо сейчас.
    Список ниже::

    http://glass.fontan-stroy.net.ua/
    http://green.fontan-stroy.net.ua/
    http://zakaz.fontan-stroy.net.ua/

    стеклянные перегородки для офиса
    вертикальное озеленение стоимость
    вертикальное озеленение
    строительство пруда водоема
    строительство дома в киеве
    искусственный мох
    стабилизированный мох
    стеклянные перегородки с металлическим профилем
    заказать аквариум в киеве
    пешеходный фонтан
    678a2b4
    изготовление корпусной мебели на заказ
    строительство ландшафтный дизайн
    купить столешницу из искусственного камня
    стена из стабилизированного мха
    строительство частных домов киев

  31. puctapassurse [#]

    best essay writer https://essaywritermsm.com/ – dissertation help writing help essaywriter writing an essay

  32. Feofanmdb [#]

    Приятели, я тут накопал великолепные порталы для создания бизнеса, спешите посмотреть как другие делают деньги на
    классных направлениях пока ты ничего не делаешь.
    Список тут::

    http://panel.fontan-stroy.net.ua/
    http://bio.fontan-stroy.net.ua/
    http://roof.fontan-stroy.net.ua/

    природный ландшафтный дизайн
    изготовление мебели для ванной на заказ
    кортеновская сталь цена
    смарт стекло стоимость
    вертикальное озеленение в квартире
    смарт стекло с переменной прозрачностью
    биокамины напольные купить
    стеклянные офисные перегородки
    агентство ландшафтного дизайна
    стеклянные перегородки в интерьере
    a60cf67
    оборудование для прудов и бассейнов
    стеклянные перегородки лофт
    купить столешницу из искусственного камня
    искусственный мох
    аквариум под заказ киев

  33. Porn Proxy [#]

    Hi to every , since I am actually keen of reading this weblog’s post to be updated on a regular basis.
    It includes nice data.

  34. NoictSocklic [#]

    https://paperwriterkjd.com/ what is a dissertation help with an essay help with writing paper i need help writing a paper for college

  35. купить диплом института [#]

    Hi there to all, how is all, I think every one is getting more from this
    website, and your views are nice designed for new people.

  36. various shrimp recipes [#]

    Outstanding post, you have pointed out some superb points, I besides think
    this is a very superb website.

  37. Feofankpp [#]

    Добрый день, я прямо тут встретил профитные порталы для создания бизнеса, спешите узнать как другие делают бабки на
    уникальных направлениях уже.
    Посмотри на это:

    http://corten.fontan-stroy.net.ua/
    http://panel.fontan-stroy.net.ua/
    http://land.fontan-stroy.net.ua/

    вертикальное озеленение стоимость
    строительство деревянных домов киев
    плавательный пруд с биоплато
    смарт стекло умное стекло
    перегородки для душевой
    ландшафтный дизайн украина
    стабилизированный мох панели
    производство пузырьковых панелей
    стабилизированный мох цена
    ландшафтный дизайн горки
    1d39103
    как работает смарт стекло
    плавательный пруд стоимость
    изготовление мебели для ванной комнаты под заказ
    столешницы из искусственного камня харьков
    изготовление мебели для кухни на заказ

  38. Feofanecx [#]

    Давно не видились, я тут насерфил обалденные интернет ресурсы для своего дела, спешите перейти как другие зарабатывают на
    уникальных супер темах прям в эту минуту.
    Увидь это:

    http://pool.fontan-stroy.net.ua/
    http://moss.fontan-stroy.net.ua/
    http://glass.fontan-stroy.net.ua/

    панно из стабилизированного мха купить
    где купить стабилизированный мох
    сухий фонтан
    строительство фонтанов киев
    биокамины встраиваемые купить
    кортен сталь
    строительство садовых прудов
    стеклянные перегородки для зонирования комнаты
    фирмы ландшафтный дизайн
    калькулятор ландшафтного дизайна
    81d3910
    где купить смарт стекло
    строительство прудов и водоемов
    кортеновская сталь
    пузырьковая аквапанель
    настенные биокамины купить

  39. EdiskJamiclaisE [#]

    viagra price buy viagra pills buy sildenafil

  40. large scale solar 4 malaysia [#]

    Have you ever thought about including a little bit more than just your articles?

    I mean, what you say is valuable and all. However imagine if you added some
    great visuals or video clips to give your posts more,
    «pop»! Your content is excellent but with pics
    and videos, this website could undeniably be one of the very best in its field.
    Good blog!

  41. купить диплом о высшем образовании [#]

    Wonderful website you have here but I was wanting to know if you knew of any discussion boards that cover the same topics discussed in this article?

    I’d really like to be a part of online community where I can get
    advice from other experienced individuals that share
    the same interest. If you have any recommendations,
    please let me know. Many thanks!

  42. โบรกเกอร์ฟอเร็กซ์ [#]

    I don’t even know how I ended up here, but I thought this post was good.
    I don’t know who you are but definitely you
    are going to a famous blogger if you aren’t already 😉 Cheers!

    Here is my web page; โบรกเกอร์ฟอเร็กซ์

  43. Triggered Insaan Roast [#]

    I quite like reading an article that can make people think.
    Also, thanks for allowing for me to comment!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab