Preload background images





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I am cycling through background images in javascript/jQuery like this...






var duration = 2500;

var delay = 500;

var i = 0;



setInterval(function() {



  if (i == 0) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");

  }



  if (i == 1) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");

  }



  if (i == 2) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");

  }



  if (i == 3) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");

  }



  i++;



}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>





Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?






javascript jquery







share|improve this question

























  • Why so complicated? Simple create <img> tags inside <div style="display:none">.

    – Martin Heralecký
    Nov 22 '18 at 13:19




















0















I am cycling through background images in javascript/jQuery like this...






var duration = 2500;

var delay = 500;

var i = 0;



setInterval(function() {



  if (i == 0) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");

  }



  if (i == 1) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");

  }



  if (i == 2) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");

  }



  if (i == 3) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");

  }



  i++;



}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>





Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?






javascript jquery







share|improve this question

























  • Why so complicated? Simple create <img> tags inside <div style="display:none">.

    – Martin Heralecký
    Nov 22 '18 at 13:19
















0












0








0








I am cycling through background images in javascript/jQuery like this...






var duration = 2500;

var delay = 500;

var i = 0;



setInterval(function() {



  if (i == 0) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");

  }



  if (i == 1) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");

  }



  if (i == 2) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");

  }



  if (i == 3) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");

  }



  i++;



}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>





Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?






javascript jquery







share|improve this question
















I am cycling through background images in javascript/jQuery like this...






var duration = 2500;

var delay = 500;

var i = 0;



setInterval(function() {



  if (i == 0) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");

  }



  if (i == 1) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");

  }



  if (i == 2) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");

  }



  if (i == 3) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");

  }



  i++;



}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>





Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?






var duration = 2500;

var delay = 500;

var i = 0;



setInterval(function() {



  if (i == 0) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");

  }



  if (i == 1) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");

  }



  if (i == 2) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");

  }



  if (i == 3) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");

  }



  i++;



}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>





var duration = 2500;

var delay = 500;

var i = 0;



setInterval(function() {



  if (i == 0) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");

  }



  if (i == 1) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");

  }



  if (i == 2) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");

  }



  if (i == 3) {

    $(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");

  }



  i++;



}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>





javascript jquery




javascript jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 13:26









Zakaria Acharki

57.3k134471




57.3k134471










asked Nov 22 '18 at 13:17









fightstarr20fightstarr20

2,9561157120




2,9561157120













  • Why so complicated? Simple create <img> tags inside <div style="display:none">.

    – Martin Heralecký
    Nov 22 '18 at 13:19





















  • Why so complicated? Simple create <img> tags inside <div style="display:none">.

    – Martin Heralecký
    Nov 22 '18 at 13:19



















Why so complicated? Simple create <img> tags inside <div style="display:none">.

– Martin Heralecký
Nov 22 '18 at 13:19







Why so complicated? Simple create <img> tags inside <div style="display:none">.

– Martin Heralecký
Nov 22 '18 at 13:19














4 Answers
4






active

oldest

votes


















1














You could preload them using CSS like:



body::after{

  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;

  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);

}


NOTE: You could use an array of images in the JS code and change them based on the index i.






var duration = 2500;

var delay = 500;

var i = 0;

var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];



setInterval(function() {

  $(".myimage").css("background-image", "url(" + images[i] + ")");

  i++;

}, duration + delay)

.myimage {

  height: 500px;

  width: 500px;

  transition: background-image 1s linear;

  background-image: url('https://placeimg.com/1648/1488/any');

  background-size: cover;

}



body::after {

  position: absolute;

  width: 0;

  height: 0;

  overflow: hidden;

  z-index: -1;

  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myimage">

</div>








share|improve this answer

































    0














    For the first time, browser needs to download all the images, once downloaded, it'll load from cache.



    So, flashes of no image will come every time whenever browser download file. you have two options




    1. the approach you are following (which is ok)



    2. Use CSS trick to load all at once by using following code



      .myimage {
      height: 500px;
      width: 500px;
      transition: background-image 1s linear;
      background-image: url('https://placeimg.com/1648/1480/any');
      background-image: url('https://placeimg.com/1648/1481/any');
      background-image: url('https://placeimg.com/1648/1482/any');
      background-image: url('https://placeimg.com/1648/1483/any');
      background-size: cover;
      }








    share|improve this answer































      0














      Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,



      make the image cycle using i= i==3?0:++i.
      Rather than just i++
      Fiddle






      share|improve this answer

































        0














        You can preload the images as followed



        function preloadImages(){
        

        
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
        
var prelaodedImages = ;
        

        
for(i=0;i<images.length;i++){
        

        
  prelaodedImages[i] = new Image();
        
  prelaodedImages[i].src = images[i];
        
  console.log(prelaodedImages[i].src)
        
}
        

        
}
        

        
preloadImages();


        After the images are preloaded you can use your code and instead of 



        "url('https://placeimg.com/1640/1480/any')")


        You use 



        "url("+prelaodedImages1.src+")")


        This should normally result in your images already being loaded and displaying correctly.






        share|improve this answer
























          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431876%2fpreload-background-images%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          4 Answers
          4






          active

          oldest

          votes








          4 Answers
          4






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          You could preload them using CSS like:



          body::after{
          
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
          
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
          
}


          NOTE: You could use an array of images in the JS code and change them based on the index i.






          var duration = 2500;
          
var delay = 500;
          
var i = 0;
          
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
          

          
setInterval(function() {
          
  $(".myimage").css("background-image", "url(" + images[i] + ")");
          
  i++;
          
}, duration + delay)

          .myimage {
          
  height: 500px;
          
  width: 500px;
          
  transition: background-image 1s linear;
          
  background-image: url('https://placeimg.com/1648/1488/any');
          
  background-size: cover;
          
}
          

          
body::after {
          
  position: absolute;
          
  width: 0;
          
  height: 0;
          
  overflow: hidden;
          
  z-index: -1;
          
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
          
}

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          
<div class="myimage">
          
</div>








          share|improve this answer






























            1














            You could preload them using CSS like:



            body::after{
            
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
            
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
            
}


            NOTE: You could use an array of images in the JS code and change them based on the index i.






            var duration = 2500;
            
var delay = 500;
            
var i = 0;
            
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
            

            
setInterval(function() {
            
  $(".myimage").css("background-image", "url(" + images[i] + ")");
            
  i++;
            
}, duration + delay)

            .myimage {
            
  height: 500px;
            
  width: 500px;
            
  transition: background-image 1s linear;
            
  background-image: url('https://placeimg.com/1648/1488/any');
            
  background-size: cover;
            
}
            

            
body::after {
            
  position: absolute;
            
  width: 0;
            
  height: 0;
            
  overflow: hidden;
            
  z-index: -1;
            
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<div class="myimage">
            
</div>








            share|improve this answer




























              1












              1








              1







              You could preload them using CSS like:



              body::after{
              
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
              
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
              
}


              NOTE: You could use an array of images in the JS code and change them based on the index i.






              var duration = 2500;
              
var delay = 500;
              
var i = 0;
              
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
              

              
setInterval(function() {
              
  $(".myimage").css("background-image", "url(" + images[i] + ")");
              
  i++;
              
}, duration + delay)

              .myimage {
              
  height: 500px;
              
  width: 500px;
              
  transition: background-image 1s linear;
              
  background-image: url('https://placeimg.com/1648/1488/any');
              
  background-size: cover;
              
}
              

              
body::after {
              
  position: absolute;
              
  width: 0;
              
  height: 0;
              
  overflow: hidden;
              
  z-index: -1;
              
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
              
}

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              
<div class="myimage">
              
</div>








              share|improve this answer















              You could preload them using CSS like:



              body::after{
              
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
              
  content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
              
}


              NOTE: You could use an array of images in the JS code and change them based on the index i.






              var duration = 2500;
              
var delay = 500;
              
var i = 0;
              
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
              

              
setInterval(function() {
              
  $(".myimage").css("background-image", "url(" + images[i] + ")");
              
  i++;
              
}, duration + delay)

              .myimage {
              
  height: 500px;
              
  width: 500px;
              
  transition: background-image 1s linear;
              
  background-image: url('https://placeimg.com/1648/1488/any');
              
  background-size: cover;
              
}
              

              
body::after {
              
  position: absolute;
              
  width: 0;
              
  height: 0;
              
  overflow: hidden;
              
  z-index: -1;
              
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
              
}

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              
<div class="myimage">
              
</div>








              var duration = 2500;
              
var delay = 500;
              
var i = 0;
              
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
              

              
setInterval(function() {
              
  $(".myimage").css("background-image", "url(" + images[i] + ")");
              
  i++;
              
}, duration + delay)

              .myimage {
              
  height: 500px;
              
  width: 500px;
              
  transition: background-image 1s linear;
              
  background-image: url('https://placeimg.com/1648/1488/any');
              
  background-size: cover;
              
}
              

              
body::after {
              
  position: absolute;
              
  width: 0;
              
  height: 0;
              
  overflow: hidden;
              
  z-index: -1;
              
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
              
}

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              
<div class="myimage">
              
</div>





              var duration = 2500;
              
var delay = 500;
              
var i = 0;
              
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
              

              
setInterval(function() {
              
  $(".myimage").css("background-image", "url(" + images[i] + ")");
              
  i++;
              
}, duration + delay)

              .myimage {
              
  height: 500px;
              
  width: 500px;
              
  transition: background-image 1s linear;
              
  background-image: url('https://placeimg.com/1648/1488/any');
              
  background-size: cover;
              
}
              

              
body::after {
              
  position: absolute;
              
  width: 0;
              
  height: 0;
              
  overflow: hidden;
              
  z-index: -1;
              
  content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
              
}

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              
<div class="myimage">
              
</div>






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Nov 22 '18 at 13:54

























              answered Nov 22 '18 at 13:24









              Zakaria AcharkiZakaria Acharki

              57.3k134471




              57.3k134471

























                  0














                  For the first time, browser needs to download all the images, once downloaded, it'll load from cache.



                  So, flashes of no image will come every time whenever browser download file. you have two options




                  1. the approach you are following (which is ok)



                  2. Use CSS trick to load all at once by using following code



                    .myimage {
                    height: 500px;
                    width: 500px;
                    transition: background-image 1s linear;
                    background-image: url('https://placeimg.com/1648/1480/any');
                    background-image: url('https://placeimg.com/1648/1481/any');
                    background-image: url('https://placeimg.com/1648/1482/any');
                    background-image: url('https://placeimg.com/1648/1483/any');
                    background-size: cover;
                    }








                  share|improve this answer




























                    0














                    For the first time, browser needs to download all the images, once downloaded, it'll load from cache.



                    So, flashes of no image will come every time whenever browser download file. you have two options




                    1. the approach you are following (which is ok)



                    2. Use CSS trick to load all at once by using following code



                      .myimage {
                      height: 500px;
                      width: 500px;
                      transition: background-image 1s linear;
                      background-image: url('https://placeimg.com/1648/1480/any');
                      background-image: url('https://placeimg.com/1648/1481/any');
                      background-image: url('https://placeimg.com/1648/1482/any');
                      background-image: url('https://placeimg.com/1648/1483/any');
                      background-size: cover;
                      }








                    share|improve this answer


























                      0












                      0








                      0







                      For the first time, browser needs to download all the images, once downloaded, it'll load from cache.



                      So, flashes of no image will come every time whenever browser download file. you have two options




                      1. the approach you are following (which is ok)



                      2. Use CSS trick to load all at once by using following code



                        .myimage {
                        height: 500px;
                        width: 500px;
                        transition: background-image 1s linear;
                        background-image: url('https://placeimg.com/1648/1480/any');
                        background-image: url('https://placeimg.com/1648/1481/any');
                        background-image: url('https://placeimg.com/1648/1482/any');
                        background-image: url('https://placeimg.com/1648/1483/any');
                        background-size: cover;
                        }








                      share|improve this answer













                      For the first time, browser needs to download all the images, once downloaded, it'll load from cache.



                      So, flashes of no image will come every time whenever browser download file. you have two options




                      1. the approach you are following (which is ok)



                      2. Use CSS trick to load all at once by using following code



                        .myimage {
                        height: 500px;
                        width: 500px;
                        transition: background-image 1s linear;
                        background-image: url('https://placeimg.com/1648/1480/any');
                        background-image: url('https://placeimg.com/1648/1481/any');
                        background-image: url('https://placeimg.com/1648/1482/any');
                        background-image: url('https://placeimg.com/1648/1483/any');
                        background-size: cover;
                        }









                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Nov 22 '18 at 13:31









                      Harsh ChaurasiaHarsh Chaurasia

                      9615




                      9615























                          0














                          Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,



                          make the image cycle using i= i==3?0:++i.
                          Rather than just i++
                          Fiddle






                          share|improve this answer






























                            0














                            Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,



                            make the image cycle using i= i==3?0:++i.
                            Rather than just i++
                            Fiddle






                            share|improve this answer




























                              0












                              0








                              0







                              Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,



                              make the image cycle using i= i==3?0:++i.
                              Rather than just i++
                              Fiddle






                              share|improve this answer















                              Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,



                              make the image cycle using i= i==3?0:++i.
                              Rather than just i++
                              Fiddle







                              share|improve this answer














                              share|improve this answer



                              share|improve this answer








                              edited Nov 22 '18 at 13:36

























                              answered Nov 22 '18 at 13:25









                              Jins PeterJins Peter

                              1,293621




                              1,293621























                                  0














                                  You can preload the images as followed



                                  function preloadImages(){
                                  

                                  
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
                                  
var prelaodedImages = ;
                                  

                                  
for(i=0;i<images.length;i++){
                                  

                                  
  prelaodedImages[i] = new Image();
                                  
  prelaodedImages[i].src = images[i];
                                  
  console.log(prelaodedImages[i].src)
                                  
}
                                  

                                  
}
                                  

                                  
preloadImages();


                                  After the images are preloaded you can use your code and instead of 



                                  "url('https://placeimg.com/1640/1480/any')")


                                  You use 



                                  "url("+prelaodedImages1.src+")")


                                  This should normally result in your images already being loaded and displaying correctly.






                                  share|improve this answer




























                                    0














                                    You can preload the images as followed



                                    function preloadImages(){
                                    

                                    
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
                                    
var prelaodedImages = ;
                                    

                                    
for(i=0;i<images.length;i++){
                                    

                                    
  prelaodedImages[i] = new Image();
                                    
  prelaodedImages[i].src = images[i];
                                    
  console.log(prelaodedImages[i].src)
                                    
}
                                    

                                    
}
                                    

                                    
preloadImages();


                                    After the images are preloaded you can use your code and instead of 



                                    "url('https://placeimg.com/1640/1480/any')")


                                    You use 



                                    "url("+prelaodedImages1.src+")")


                                    This should normally result in your images already being loaded and displaying correctly.






                                    share|improve this answer


























                                      0












                                      0








                                      0







                                      You can preload the images as followed



                                      function preloadImages(){
                                      

                                      
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
                                      
var prelaodedImages = ;
                                      

                                      
for(i=0;i<images.length;i++){
                                      

                                      
  prelaodedImages[i] = new Image();
                                      
  prelaodedImages[i].src = images[i];
                                      
  console.log(prelaodedImages[i].src)
                                      
}
                                      

                                      
}
                                      

                                      
preloadImages();


                                      After the images are preloaded you can use your code and instead of 



                                      "url('https://placeimg.com/1640/1480/any')")


                                      You use 



                                      "url("+prelaodedImages1.src+")")


                                      This should normally result in your images already being loaded and displaying correctly.






                                      share|improve this answer













                                      You can preload the images as followed



                                      function preloadImages(){
                                      

                                      
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
                                      
var prelaodedImages = ;
                                      

                                      
for(i=0;i<images.length;i++){
                                      

                                      
  prelaodedImages[i] = new Image();
                                      
  prelaodedImages[i].src = images[i];
                                      
  console.log(prelaodedImages[i].src)
                                      
}
                                      

                                      
}
                                      

                                      
preloadImages();


                                      After the images are preloaded you can use your code and instead of 



                                      "url('https://placeimg.com/1640/1480/any')")


                                      You use 



                                      "url("+prelaodedImages1.src+")")


                                      This should normally result in your images already being loaded and displaying correctly.







                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Nov 22 '18 at 14:02









                                      mrdeadsvenmrdeadsven

                                      458216




                                      458216






























                                          draft saved

                                          draft discarded




















































                                          Thanks for contributing an answer to Stack Overflow!


                                          • Please be sure to answer the question. Provide details and share your research!

                                          But avoid …



                                          • Asking for help, clarification, or responding to other answers.

                                          • Making statements based on opinion; back them up with references or personal experience.


                                          To learn more, see our tips on writing great answers.




                                          draft saved


                                          draft discarded














                                          StackExchange.ready(
                                          function () {
                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431876%2fpreload-background-images%23new-answer', 'question_page');
                                          }
                                          );

                                          Post as a guest















                                          Required, but never shown





















































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown

































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown







                                          -

                                          Popular posts from this blog

                                          How to pass form data using jquery Ajax to insert data in database?

                                          Image
                                          .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 1 I have 4 tables namely stud, country_master_academic,master_state and master_city. The main problem is that my form consists of many different fields like textbox, radio buttons, dropdown and an image file, so i am getting really confused. I can't insert data in database. Please help me. I tried many times but its not working. Thanks for the help in advance. Modal in home.php page <div class="container"> <div class="modal fade" id="add_data_modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> ...
                                          Read more

                                          National Museum of Racing and Hall of Fame

                                          Image
                                          Coordinates: 43°04′35″N 73°46′24″W  /  43.0763°N 73.7734°W  / 43.0763; -73.7734 Professional sports hall of fame in Saratoga Springs, New York National Museum of Racing and Hall of Fame National Museum of Racing and Hall of Fame Established 1951 Location Saratoga Springs, New York Type Professional sports hall of fame Director Cathy Marino Curator Victoria Tokarowski Website racingmuseum.org The National Museum of Racing and Hall of Fame was founded in 1951 in Saratoga Springs, New York, to honor the achievements of American Thoroughbred race horses, jockeys, and trainers. In 1955, the museum moved to its current location on Union Avenue near Saratoga race course, at which time inductions into the hall of fame began. Each spring, following the tabulation of the final votes, the announcement of new inductees is made, usually during Kentucky Derby Week in early May. The actual inductions are held in mid-August during the Saratoga race meeting...
                                          Read more

                                          Guess what letter conforming each word

                                          Image
                                          6 $begingroup$ This is an entry in the Fortnightly Topic Challenge #41: Short and Sweet. 1 letter only could be mean anything . With an additional letter in front , could be used as medicine component and something you definitely learn or at least heard once. Add another letter in front , you would possibly hear that many times . Add an additional letter in front , you would found an independent country . With an additional letter, in the end , you would found something related to apple . Add another letter in the end , you would found something bad . Hint: Each letter is unique . word knowledge letters chemistry share | improve this question ...
                                          Read more