Placeholder for .js Slideshow While It Loads

Hi,

I found this slideshow to incorporate in my website, but I can't figure out how to place an image on top of it (or under it) that will disappear when it loads.
http://www.slidesjs.com/

Right now, the page has no images (slideshow) on it until they load, and then everything jumps around to accommodate the images (slideshow) that appear.

I believe I tried what they suggest here, but it didn't work (this is some days ago, so I forgot a bit):
http://stackoverflow.com/questions/1...-image-to-load
The placeholder image wouldn't end up on top of the slideshow, or under it, but before it, so the slideshow would end up lower down after this image.

Someone else has asked the same question on the slideshow developer's site a month or more ago and it wasn't answered.

I'm sure it has nothing to do with his slideshow script, but rather some simple HTML coding.

Thanks!

This is really two separate things:

1) How to prevent the slideshow from causing the page layout to jump around while the slideshow and the page are loading.

2) How to introduce a loading image as a visual indicator that the slideshow is loading that will become unseen once the slideshow has loaded.

The first looks fairly easy. If you look at the actual markup on the page we see something like so:

Code:

---

  <!-- SlidesJS Required: Start Slides -->
  <!-- The container is used to define the width of the slideshow -->
  <div class="container">
    <div id="slides">
      <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
      <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
      <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
      <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
      <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
    </div>
  </div>
  <!-- End SlidesJS Required: Start Slides -->

---

That container has no defined height, so will be zero height until something with either layout height or specified height fills it. The script does that at some point, but I'm guessing, not soon enough for your layout.

You can define a css pixel height for the container class or for that element individually using an id you could assign to it or inline. It should be the height of the images + the height of the navigation/pagination. That is if those controls appear above or below the slideshow. If they're on the sides or superimposed upon the slideshow, then their height should not be included.

Adding a loading image might be as simple as setting a small animated GIF loading image as the background image for that same division. Set it to center no-repeat. With any luck it will appear as the slideshow is loading and simply be covered by the slideshow once it loads:

Code:

---

.container {
height: ###px; /* set ### to the desired height */
background: url(loading.gif) center no-repeat;
}

---

But the slides division might have background, a color at least. If it does, the loading image should be applied as background to it instead. Overriding style with the !important keyword might need to be used:

Code:

---

.container {
height: ###px; /* set ### to the desired height, include height of navigation/pagination if appropriate */
}
#slides {
height: ###px; /* set ### to the desired height, this time only the height of the images */
background: white url(loading.gif) center no-repeat !important;
}

---

And even that might not show up. If it doesn't I would have to see the page once you have it set up. One thing that would be good is to preload the loading image so that it can in theory be seen as soon as possible, even by first time visitors to the page:

Code:

---

<script>
;(function(){
var img = new Image();
img.src = 'loading.gif';
})();
</script>

---

Put that after the styles in the head of the page.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Oh, I see, thanks!
I will give it a try and post results.

The first method works, where I assign the container a height.
But I cannot use it, because I want the area to resize when I resize the page, which the slides currently do (they must be set to 100% width/height or something like that).
If I give the container a height in px, then it stays that height while the slides shrink.

Height auto or Height=100% also didn't work.

The second method of loading a gif as the background doesn't work at all.

Code:

---

background: white url(loading.gif) center no-repeat !important;

---

It doesn't load the loading.gif. I made that image to be the height and width of the slideshow, but it doesn't show up at all, even with putting the javascript code in the head of the page. In fact, I even changed the background color to test it (from white) and it didn't show up either.

On the first issue, you might not be able to have your cake and eat it too. Meaning that if you want the page to adjust to the size of the images and the images to adjust to the size of the window, you may have to put up with a bit of jumpiness in the layout as the page loads. Or not, I'd have to see it to really tell. Something might be able to be worked out on that. Pointless to speculate without seeing the page.

On the second issue, it's unclear to me if you tried all the options as I laid them out, or even if you did, if you applied them as I had envisioned. Even if you did, I said on that one that more might be required to get it to work. Again, I would have to see the page to determine why the background image is not showing up.

So for both issues it's now a case of seeing what you have.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

If you don't have a live page yet, put one up. It obviously doesn't have to work as desired. It just has to show me the general layout and how you're using the slideshow. Set it up with the slide images 100% width/height.

Without that I cannot really help further.

Sure, here is one page:
(Updated a few days later: I have removed the link because spammers started posting on this thread, plus, it's not necessary any longer.)

Code:

---

    <script>
    ;(function(){
    var img = new Image();
    img.src = '../loading.png';
    })();
    </script>

---

And the css:
(Updated a few days later: I have removed the link because spammers started posting on this thread, plus, it's not necessary any longer.)

Code:

---

                #slides {
                        width: 100%;
                        background: #fff url(../loading.png) center no-repeat !important;
                        /* display: none; was there, but I took it out because I saw no use*/
                }

---

I called it loading.png - it's just orange so I can check if it shows up.

I was also wondering if there is another way of placing one object on top of another, in the same spot, so I could have the background image as an element that shows up there. first, and then the slides load exactly on top of it.

Thanks!

I'm not sure about the layout jumpiness visa vis the 100% width/height on the images yet. As I said, you might not be able to do both things there.

And there could also be other problems, but at least one problem with the loading image is that it's a 404 Not Found. That's because relative paths for images in a css file are relative to the css file, not to the page that is using the images. So, since the background image is in the same folder as the css file, the css should be:

Code:

---

                #slides {
                        width: 100%;
                        background: #fff url(loading.png) center no-repeat !important;
                        /* display: none; was there, but I took it out because I saw no use*/
                }

---

When in doubt you can always use the absolute path to the image.

If you do get it to show up, it's too big. But you probably know that and are just using it at that size to see if you can get it to show up at all.

What I had in mind is something more like:

Attachment 5066

Maybe a little bigger than that, but not too much bigger. You can easily design and save your own custom loading image here:

http://www.ajaxload.info/

Ah, and I suspected something like that, the wrong folder, but I didn't try it!

Thank you so much!

I made the background image the size of the slides because I thought a little image wouldn't hold the place (in height) of the slides that are loading, but I guess it does. My connection is too fast to check that really well, even after I clear the cache.

That ajax website is great!