Utiliser AJAX/jQuery pour actualiser une image

Question

C'est probablement une question simple mais je suis perplexe et je ne sais pas par où commencer.

J'ai un script PHP (image_feed.php) qui renvoie une URL à une image. Chaque fois que cette URl est appelée, elle renvoie la dernière image disponible (l'image change toutes les deux secondes). Qu'est-ce que je veux arriver, c'est que lorsque la page se charge, il y a un appel AJAX à image_feed.php, qui renvoie la dernière URL. Cet URl est ensuite inséré dans le HTMl en remplacement de l'image src appropriée.

Après 5 secondes, je souhaite que le processus se répète et que l'image soit mise à jour. Cependant, je ne veux pas que l'image soit permutée tant que le chargement n'est pas terminé, et je veux éviter qu'un espace blanc apparaisse avant que la nouvelle image ne se charge.

Pour l'instant, j'ai le jQuery suivant, qui charge simplement la valeur de retour de image_feed.php directement dans un div appelé # image1. image_feed.php est correctement formaté pour fournir une balise d'image html.

$(document).ready(function(){ 
    var $container = $("#image1"); 
    $container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>') 
    var refreshId = setInterval(function() 
    { 
     $container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>'); 
    }, 5000); 

}); 

Cela fonctionne, mais il y a un problème. Je reçois un espace blanc de la taille de l'image dans IE et Firefox chaque fois que l'image se rafraîchit, car l'image prend un certain temps à télécharger.

Je sais que j'ai besoin de image_feed.php pour retourner l'URL brut à l'image. J'utilise ensuite jQuery pour demander cette URL, la précharger puis l'échanger avec l'image existante.

Cependant, je me bats toujours pour aller n'importe où. Quelqu'un pourrait-il avoir la gentillesse de me donner des conseils/de l'aide?

Answer 1

$(document).ready(function() { 
    var $img = $('#image1'); 
    setInterval(function() { 
     $.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) { 
      var $loader = $(document.createElement('img')); 
      $loader.one('load', function() { 
       $img.attr('src', $loader.attr('src')); 
      }); 
      $loader.attr('src', data); 
      if($loader.complete) { 
       $loader.trigger('load'); 
      } 
     }); 
    }, 5000); 
}); 

Untested. Le code ci-dessus doit charger la nouvelle image en arrière-plan, puis définir l'attribut src de l'ancienne image sur le chargement.

Le gestionnaire d'événements pour le chargement ne sera exécuté qu'une seule fois.La vérification .complete est nécessaire pour les navigateurs qui ont peut-être mis en cache l'image à charger. Dans ce cas, ces navigateurs peuvent ou non déclencher l'événement load.

Answer 2

Vous pouvez. Lorsque vous voulez recharger quelque chose, vous pouvez simplement ajouter une requête de recherche, afin d'actualiser la source.

Pour Par exemple, quand il y a une image changeant fréquemment (dire captcha) et vous voulez le charger à nouveau, sans rafraîchir le navigateur, vous pouvez le faire de cette façon.

code initial:

<img src="captcha.png" alt="captcha" /> 

code Refreshed:

<img src="captcha.png?1" alt="captcha" /> 

Le script utilisé ici serait juste:

var d = new Date(); 
$('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds()); 

Espérons que cela aide! :)

Answer 3

Tenir compte, si vous devez chercher l'URL à nouveau à partir du serveur, pour une nouvelle URL de l'image, vous pouvez le faire de cette façon:

$.ajax({ 
    url: 'getnewimageurl.php', 
    success: function(data) { 
    $('img').attr('src', data); 
    } 
}); 

Le serveur doit retourner seulement un nouveau nom de l'image en elle . . Pour exemple, le code PHP doit être ainsi:

<?php 
    $images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii"); 
    die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images. 
?> 

Answer 4

Je vous suggère d'utiliser jQuery 'onImagesLoad' Plugin Ceci vous fournit un rappel quand une image a fini de charger.

Lorsque vous recevez une nouvelle URL d'image du serveur, vous créez un nouvel objet <img avec src="new_url_from_server" et vous y attachez le rappel 'onImagesLoad'. Lorsque votre rappel est appelé, votre image a fini de télécharger.

Maintenant vous pouvez simplement remplacer l'attribut 'src' de l'ancien objet img par new_url_from_server. Comme une nouvelle image est déjà disponible en cache, elle ne sera plus téléchargée et sera immédiatement affichée!

Aletrnatively, vous pouvez masquer l'ancienne image et d'ajouter cette nouvelle image à DOM (non requis si les travaux ci-dessus correctement)

Certains échantillons nus os pourrait ressembler à ceci:

<!DOCTYPE html> 
<html> 
<body> 
<img id='bla' src="10.jpg" /> 

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.onImagesLoad.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     var img = $('<div><img src="http://myserverbla/images/verybig.jpg"></img></div>'); 
     img.onImagesLoad({ 
       all : allImgsLoaded 
      }); 

     function allImgsLoaded($selector){ 
      var allLoaded = ""; //build a string of all items within the selector 
      $selector.each(function(){ 
       $('#bla').attr('src','http://myserverbla/images/verybig.jpg'); 
      }) 
     } 
    }); 
</script> 

</body> 
</html>