Display image until gif is loaded

Asked

Viewed 330 times

0

I am loading a gif when the user hovers over a certain one <div>. I do this using jQuerry with the following code:

$('#vidthumb_' + idDoDiv).attr('src', caminhoParaOGif);

the problem is that gif takes about 1 second to load, and I wanted to show something (loading image or text) until the gif is loaded and ready to play, how should I change my code?

javascript jquery

  • I left as an answer a solution for you.

2 answers

1


You can add a spinner done in CSS after the element <img>, that will be removed after the gif is loaded by onload.

You just have to put the image inside a div (that one div will not influence the layout, serves only as a reference).

See example (as the transition is very fast, I left commented the line that hides the spinner so you can see it in the example):

caminhoParaOGif = "https://tctechcrunch2011.files.wordpress.com/2015/08/safe_image.gif";

$("#vidthumb_").on("mouseover", function(){
   $(this).after('<span class="loader"></span>');
   $('#vidthumb_')
   .attr('src', caminhoParaOGif)
   .on("load", function(){
//      $(this).next().remove(); // descomente esta linha
   });
});
*{
   position: relative;
}

.loader {
    border: 16px solid #f3f3f3; /* cinza */
    border-top: 16px solid #3498db; /* azul */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -31px 0 0 -31px; /* metade da soma do width + 2x a borda*/
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block;">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" height="200" width="200" id="vidthumb_" />
</div>

  • Great method, but remember that @keyframes does not work on some old browsers :D

  • It works on IE 10+... I think it’s quite satisfactory. : D

  • Yes, it depends on the need and for those who develop, I myself have a project in a company that I had to readjust the css for ie7 because the people only use it. It would be great if you started following the updates, rs.

  • how can I edit/play with snippet?

  • @ihavenokia Vc can change only the dimensions and colors by changing the border, width/height and colors of the edges.

  • @ihavenokia If you want to put another style of spinner, then you can search the net some and replace, because the logic is the same.

Show 1 more comment

0

As you are assigning the image via script, it takes a while to load into the document. A hint is to place a gif/image that you want to stay until your image directly clicks on the element, so when the user hovers over the element, the image will be displayed until the new image is assigned to src. Example:

$('#img').mouseenter(function(){
  $(this).attr('src','http://www.topimagens.com.br/imagens/imagens-mais-novas.jpg');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="img" src="https://media2.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"/>

  • but in this case happens exactly the problem I have, if newer images.jpg is a gif and take time to load will give the sensation that it is a mere image and the user can take the mouse on top of the div because it is not moving for some time'.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.