0

I'm trying to figure out how to apply a loading image <div> behind each of my images. With help from a previously answered question here, I was able to do this for my pages with a CSS&JS slideshow. Now I just want it to work with any basic image. I've tried to wrap my images in divs and apply it the same way, but I don't think I am understanding the full process here. My issue may be with how I wrap my images and text with the <p> tag to get them aligned properly.

Rather than try and post all the snippets of code that come together to make my slideshow work, I'll just refer to the beta version of the website in question: http://www.gwassociates.com/beta

I would like to be able to add the loading icon to the static images on the "Team" and "Contact" pages. You can find examples of the working effect on the "Home", "Profile" and "Press" sections.

The <div class="loading load-style"> calls out my spinning loading icon as a div background image, I threw it in the "Team" page just to show it. The icon needs to load behind each thumbnail, just like in the slideshows of the other pages.

1 Answer 1

0

two problems I see here.

  1. you are using a solid image and animating it. That's not the ideal method these days. Instead just post a gif and skip the animation. It will make older computers have better performance on your site.

Check out this free gif generator: http://preloaders.net/

  1. Your image appears just fine. But it's appearing behind the image. Put a display none on the image and you'll see what I mean. Instead of putting the loader image as a background class put it inside the div as the backgournd of another div that is display:none normally and display:block when your spinner class is applied. Then your z-index will actually work and put the spinner in front of the 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 your javascript adds the spinner class make sure your ajax call is async or the spinner won't be added at the right time.

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

3
  • 1. Thanks for the suggestion, but .gifs look terrible. 2. I tried to implement your example but it just wasn't working. I appreciate the time and effort to look into my problem. My solution: scrap the whole idea! I rolled out the website without it. Oct 24, 2014 at 22:02
  • 1. Giffs are used in every major website out there. Not sure why you think they look terrible. Maybe you just got a bad giff. Check out that generator I posted. 2. My solution was very rough. It needs to be adapted to your use case. Maybe try this tutorial that explains it a little better. (example 2 with jquery) preloaders.net/en/ajax_loader_script Oct 27, 2014 at 15:32
  • I guess I'm just a snob when it comes to images. I don't like gif's lack of alpha channels or the restricted palette. I like smooth animation as well, so using svg rotation worked in place of a gif that would need many more frames to get close to this effect. I know your solution was rough, and I think I get the concept, but I just couldn't adapt it on my own. At the end of the day, I had to drop the whole idea (I literally had until the end of the day to find a solution). The beta site went live that afternoon. Thanks for the suggestions anyway. Oct 28, 2014 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.