comment réduire le temps de chargement de l'image en javascript

Question

Je charge l'image sur le bouton cliquez sur suivant et précédent ici je n'ai que 2 div qui animent sur le clic du bouton suivant et précédent avec différentes images provenant de la base de données à travers json.

Je fais fonctionner ma fonctionnalité mais ça ne me semble que sur localhost quand je télécharge cela sur le serveur il y a un écran vide entre l'animation et le chargement de l'image sont chargés correctement donc un div vide est montré

Je veux réduire ce temps de chargement ou mon écran montrera quand l'image a été chargée complètement comment puis-je le réparer?

Fondamentalement, je veux un chargeur ajax qui se supprimer automatiquement après le chargement Voici mon code

<table cellpadding="0" cellspacing="0" border="0" width="815" align="center"> 
    <tr> 
     <td><div class="btnPrv2" id="btnPrv2">&lt;</div></td>    
     <td> 
      <div class="slider"> 
       <div class="mc3" id="mc3" ><img src="" class="ff3" /></div> 
       <div class="mc4" id="mc4" ><img src="" class="ff4" /></div> 
      </div> 
     </td>    
     <td><div class="btnNxt2" id="btnNxt2">&gt;</div></td>    
    </tr> 
</table> 

<script> 
    $(function(){ 
     $(".mc3").animate({left:"-=782px" },350); 
     $(".mc4").animate({left:"-=782px" },350, function(){ curwdiv = hdiv; canAnim = true}); 
    }); 
</script> 

Answer 1

Une façon de le faire pourrait être charger les images lors du chargement de la page, mais gardez-le cacher en utilisant zindex ou quelque chose comme ça, alors vous avez juste besoin de le mettre sur le front et le temps de chargement devrait être plus long pour le chargement de la page mais moins sur l'action du bouton.

pourrait être quelque chose comme ça dans votre code html:

<div class="mc3" id="mc3" style="zindex:-1;" ><img src="" class="ff3" /></div> 

Et puis quelque chose comme ça dans votre js pour afficher l'image (peut-être dans votre fonction):

$(".mc3").zIndex(inherit); 

PD: Je pense que vous devriez regarder dans votre ortographie et sintax, il est presque impossible de comprendre votre question.

Answer 2

J'ai cette fiche quelque part,

Par exemple, vous avez

<img class="preload_image" src="#"> 
<img class="preload_image" src="#"> 
<img class="preload_image" src="#"> 

Il comptera les images, et vérifiera si tous sont déjà chargés, vérifiez le code ci-dessous.

// .preload_image is the image class that needed to be loaded 
$('.preload_image').imagemonitor({ 
    'onLoad': function (loadedImage, totalImage) { 
     // While loading, progress bar will be shown 
     $('#load-progressbar img').css('width', Math.floor((loadedImage/totalImage) * 100) + '%'); 
    }, 
    'onComplete': function (loadedImage) { 

     // After loading, show image 
     $('#load-display').fadeOut(2000).queue(function() { 
      $('#content-display').fadeIn(2000); 
      $(this).dequeue(); 
     }); 
    } 
}); 

Ensuite, voici le code source pour cela.

(function($){ 
    $.fn.imagemonitor = function(imageEvent) 
    { 
    var totalImage = 0; 
    var loadedImage = 0; 
    var loadedImageSrc = Array(); 
    var imageObject = Array(); 
    var isComplete = false; 
    var loop_delay = 200; // in miliseconds 
    var imgElement = this; 
    if(imageEvent.init == null) imageEvent.init = function(){}; 
    if(imageEvent.onLoad == null) imageEvent.onLoad = function(){}; 
    if(imageEvent.onComplete == null) imageEvent.onComplete = function(){}; 
    function createImageObject() 
    { 
     imgElement.each(function(index) 
     { 
      imageObject[index] = new Image(); 
      $(imageObject[index]).attr('src', $(this).attr('src')); 
     }); 
    } 
    function count_loaded_image() 
    { 
     for(var i=0; imageObject[i]; i++) 
     { 
      if(!checkIfLoaded($(imageObject[i]).attr('src'))) 
      { 
       if(imageObject[i].complete || imageObject[i].readyState === 4) 
       { 
        loadedImageSrc.push($(imageObject[i]).attr('src')); 
        loadedImage++; 
        imageEvent.onLoad(loadedImage, totalImage); 
       } 
      } 
     } 
     if((loadedImage == totalImage) && !isComplete) 
     { 
      isComplete = true; 
      imageEvent.onComplete(loadedImage); 
     } 
     else setTimeout(count_loaded_image, loop_delay); 

    } 
    function getTotalImage() 
    { 
     var tempImageSrc = Array(); 
     imgElement.each(function(index) 
     { 
      var counted = false; 
      for(i=0; tempImageSrc[i]; i++) 
      { 
       if(tempImageSrc[i] == $(this).attr('src')) counted = true; 
      } 
      if(!counted) tempImageSrc.push($(this).attr('src')) 
     }); 
     return tempImageSrc.length; 
    } 
    function checkIfLoaded(src) 
    { 
     var loaded = false; 
     for(var i=0; loadedImageSrc[i]; i++) 
     { 
      if(loadedImageSrc[i] == src) loaded = true; 
     } 
     return loaded; 
    } 
    function setOnloadEvent() 
    { 
     imgElement.each(function(index) 
     { 
      $(this).load(function() 
      { 
       if(!checkIfLoaded($(this).attr('src'))) 
       { 
        loadedImage++; 
        loadedImageSrc.push($(this).attr('src')); 
        imageEvent.onLoad(loadedImage, totalImage); 
        if((loadedImage == totalImage) && !isComplete) 
        { 
         isComplete = true; 
         imageEvent.onComplete(loadedImage); 
        } 
       } 
      }); 
     }); 
    } 
    imageEvent.init(); 
    totalImage = getTotalImage(); 
    createImageObject(); 
    setOnloadEvent(); 
    count_loaded_image(); 
    }; 
})(jQuery);