Preload a folder with images

Asked

Viewed 307 times

-5

Is there any way to pre-load an image folder instead of pre-loading image by image with javascript? 'Cause I’m gonna have a folder with a bunch of pictures that are gonna be played by a database.

javascript jquery

  • What do you mean "preload"?

  • @Pabloalmeida make it load all images of this folder but do not show, and when I press on load+ the database will pull these images they appear on the same shelf without delay

  • 1

    I do not know if I understood your boss. The purpose of "Charge more" is precisely not to carry everything. If I had to carry everything, I wouldn’t need "Carry more".

  • 1

    Possible duplicate of Load from Database only when all is loaded

  • @War is not duplicate :) that’s a different question ^^

  • Good Afternoon @kaiquemix, I didn’t quite understand your question, but wouldn’t you be looking for something in the sense of Lazy Load? There is a plugin that calls 'Lazy Load Plugin for jQuery'. Maybe that’s what you’re looking for...

  • @Leonardocoelho for some reason did not solve my problem because the images appear after Load+ with ajax, and I want to take the delay

  • What have you tried? Here we do not provide the complete solution, we indicate the way, your previous question you have already been oriented, from yesterday to today tried something?

  • @War as above I was directed to use such plugin, however explain above the pq of not being able to use it.

Show 4 more comments

1 answer

2


Well come on,

Hypothetical situation,

You have a div, where you will put your images,

Let’s imagine:

<div class='preload'><img src='urlimagem'></div>

In this case, when loading your page you will make the images available in this div, leaving the Preload with a "display:None attribute"

When the client clicks on +, you can leave a gif load for example:

$('.botaoMais').click(function(){
   $('.espacoCarregamento').html('gif de loading');
   var controle = true;
   $('.preload').each(function(){
      if($(this,'img').complete == false){
         controle = false;
      }
   });
   if(controle == true){
   //display block na div das imagens.
   }
   }
});

This is to give display block when you have loaded everything, but could go 1 by 1 as it is loaded.

I think it’s over- over.

But this is kind of complex because you have to hold the execution until it loads, I think the easiest way is to use this lib:

http://imagesloaded.desandro.com/

  • got it, in case I have to show this by clicking on the div instead of only on the image, since it loads 6 blocks of div, and after 1 second loads the images of each block

  • 1

    I thought of a better way here, when you load your page already puts the separate Ivs into blocks that will be displayed separately, leaves those that are not visible with None display but leave them there, then the img will load and then click on the + just give a display block and it already renders

  • i do a json for a return and when load go appearing

  • 1

    I edited the answer with a lib q will solve all your problems, if you have no problem strongly recommend using it

  • so that’s exactly what I use :D, but like this coming from the database of a small delay of 1 second and my chef is complaining that he doesn’t want delay :/, I just didn’t put those effects. give a look here somospixel.com/test on

  • I think I got an idea, I’m going to make a black frame with this loading icon of the same size as the image, and when the image loads it appears ;), and now is how I’m going to do this....

Show 1 more comment

Browser other questions tagged javascript jquery

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