Preload image

[Redani]

Hi, Is there a way to display a loading gif until the main image is ready to be displayed?

Thanks

[Goardo-43]

Hi there - I know this was posted last year but I'm currently looking for a solution to this and wondered if you had any joy? The only way I can see of doing this is to place a gif in the body behind the fullscreen slider? The only downside of this is that the gif (albeit lo-res), is permanently there and the slider loads over the top obscuring it, so in a sense it feels like a loading screen. i'd be interested if you found another way though?

[magic-77]

Hi, yes there is a simple solution for that. Place this HTML in your Document. ( taken from Nic Aitch´s Demo Page: http://nicinabox.com/superslides/ )

<div class="loading-container">
    <div class="pulse"></div>
</div>

SASS for preloader

.loading-container {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  .pulse {
    border: 3px solid #999;
    height: 30px;
    width: 30px;
    position: absolute;
    left: -15px;
    top: -15px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    border-radius: 30px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

and KEYFRAMES:

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0.0;
  }

  50% {
    opacity: 1.0;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}
@-moz-keyframes pulsate {
  0% {
    -moz-transform: scale(0.1, 0.1);
    opacity: 0.0;
  }

  50% {
    opacity: 1.0;
  }
  100% {
    -moz-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

and then use this script to remove the Loader:

$(document).on('init.slides', function() {
        $('.loading-container').fadeOut(function() {
          $(this).remove();
        });
    });

but instead of this pulsing animation, you can also put an GIF Animation there

[Goardo-43]

Thank you - will give it a go and feedback on results

[Goardo-43]

Am i able to use an image as my preloader?

[magic-77]

hi, yes, sure just replace

<div class="pulse"></div>

with your image, or put it inside, but then remove the .pulse styles

[Goardo-43]

Hi magic, thanks for your help here. As I understand it, would it not make sense to add a background image to the loading class?

[magic-77]

Hi, both methods are possible

<div class="loading-container">
    <img src="loading.gif">
</div>

or with background-image

<div class="loading-container">
    <div class="loading-gif"></div>
</div>

[Goardo-43]

Ah right - I see... your pulse was the loading screen... sorry, i'm being a

. lol

Thanks muchly - will give it a go and feedback

[Goardo-43]

Hi there - have been trying to get this to work but just can't seem to get it to.... going back to the start... you said to place the html in your document... I've tried it outside the #slides div, inside it, inside the 'slides-container' div, outside it... can't seem to get it to show anything other than white before it loads the slider...the image fades in nicely once loaded but no loading screen... tried your pulse too instead of an image and can't see that either.... any ideas? I must be placing it in the wrong place or something... I want to call it as a background image so hopefully this should work somehow.

[magic-77]

Hi, some code would be helpful or a link to your page

[Goardo-43]

Will create a test and send a link as soon as i can - many thanks - apologies... bit of a newb

[Goardo-43]

hi there,

Have stripped out and uploaded a test to show how it's being used. Perhaps you could advise what I'm doing wrong here? Have added loading container on line136 of index.html and the javascript on line 254 of index.html. I know there's a lot of other stuff going on..... The css has been added to 'superslides.css' - really struggling with. Have left a couple of the images large so that I could see the loading screen but to no avail as yet...

Test hosted at:

http://the3rdobject.com/test-slide/index.html

Please help and many thanks for your input so far. Really appreciate it.

[magic-77]

hey, had to break down your code - where can i send it to? have an solution for you

[Goardo-43]

Have managed to get this working perfectly within my completed page, all thanks to you! I tip my hat to you sir!

[Redani]

Hey guys,

I had managed to do it too using the solution of magic-77, but I was wondering if there is an option that can be added which will automatically generate the html and js code to do so...