css - Place a loading icon div behind thumbnails -

css - Place a loading icon div behind thumbnails -

i'm trying figure out how apply loading image <div> behind each of images. help a answered question here, able pages css&js slideshow. want work basic image. i've tried wrap images in divs , apply same way, don't think understanding total process here. issue may how wrap images , text <p> tag them aligned properly.

rather seek , post snippets of code come create slideshow work, i'll refer beta version of website in question: http://www.gwassociates.com/beta

i able add together loading icon static images on "team" , "contact" pages. can find examples of working effect on "home", "profile" , "press" sections.

the <div class="loading load-style"> calls out spinning loading icon div background image, threw in "team" page show it. icon needs load behind each thumbnail, in slideshows of other pages.

two problems see here.

you using solid image , animating it. that's not ideal method these days. instead post gif , skip animation. create older computers have improve performance on site.

check out free gif generator: http://preloaders.net/

your image appears fine. it's appearing behind image. set display none on image , you'll see mean. instead of putting loader image background class set within div backgournd of div display:none , display:block when spinner class applied. z-index work , set spinner in front end of image.

rough (untested) code:

<div class="image-wrapper"> <img class="image"> <div class="spinner"> </div> </div> <style> .spinner { display: none; width: 100px; height: 100px; position: relative; z-index: 10;} .spinner.loading { display: block } </style>

also when javascript adds spinner class create sure ajax phone call async or spinner won't added @ right time.

a more thorough example: http://preloaders.net/en/ajax_loader_script

css image