l'image jQuery et PHP RO- casse-tête

Question

Jquery casse-tête

J'ai un script php qui renvoie le nom de l'image aléatoire jpg à partir d'un dossier. Il est bien parce que je n'ai pas renommer les images du tout; Je viens de les déposer dans le dossier et le randomizer fonctionne. En ce moment, j'appelle le script comme celui-ci - http://mydomain.com/images/rotate.php -. et sur un simple rechargement de la page web, il permute les images

Mais je voudrais le faire fonctionner avec jQuery que je voudrais avoir l'échange d'image dans une nouvelle image sur un intervalle de dix secondes environ, et aussi les effacer et les disparaître.

Modifier 23/01/10:

Cela fonctionne en échangeant dans un spacer.gif. Il pourrait y avoir une solution plus élégante, mais cela fonctionne pour moi. Munch pensé à elle, par le biais d'une idée par MidnightLightning:

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

Et voici rotate.php:

<?php

$folder = '.';


    $extList = array();
    $extList['gif'] = 'image/gif';
    $extList['jpg'] = 'image/jpeg';
    $extList['jpeg'] = 'image/jpeg';
    $extList['png'] = 'image/png';


$img = null;

if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}

if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
        $img = $folder.$imageInfo['basename'];
    }
} else {
    $fileList = array();
    $handle = opendir($folder);
    while ( false !== ( $file = readdir($handle) ) ) {
        $file_info = pathinfo($file);
        if (
            isset( $extList[ strtolower( $file_info['extension'] ) ] )
        ) {
            $fileList[] = $file;
        }
    }
    closedir($handle);

    if (count($fileList) > 0) {
        $imageNumber = time() % count($fileList);
        $img = $folder.$fileList[$imageNumber];
    }
}

if ($img!=null) {
    $imageInfo = pathinfo($img);
    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
    header ($contentType);
    readfile($img);
} else {
    if ( function_exists('imagecreate') ) {
        header ("Content-type: image/png");
        $im = @imagecreate (100, 100)
            or die ("Cannot initialize new GD image stream");
        $background_color = imagecolorallocate ($im, 255, 255, 255);
        $text_color = imagecolorallocate ($im, 0,0,0);
        imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
        imagepng ($im);
        imagedestroy($im);
    }
}

?>

Answer 1

L'inconvénient, je veillerai à ce que ce faire est qu'il y aura une période de charge pour la nouvelle image et l'animation peut être un peu bizarre à cause de cela. Il peut être avantageux d'avoir deux parties à ce fichier où un chemin est retourné si une valeur de $ _GET est égale à une chose, et l'image est renvoyée si cette valeur $ _GET est pas défini ou il est égal à autre chose. De cette façon, vous pouvez précharger une série d'images et il y aurait une animation plus fluide entre les images.

Cela dit, il me semble que quelque chose comme cela devrait fonctionner.

$(document).ready(function(){
   function swapImage(){
      var time = new Date();
      $('#image').fadeOut(1000)
       .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
       .fadeIn(1000);
   }

   var imageInterval = setInterval('swapImage()',10*1000); 
});

Le temps le rend si le navigateur pense qu'il devient une nouvelle image.

spacer.gif

Pour ce faire, avec une entretoise noire, je vous recommande l'emballage de votre image dans un div et donnant la div une couleur d'arrière-plan # 000 pour correspondre à l'entretoise:

#image-wrap{background-color:#000;}

Il ferait si l'image réellement disparu au noir, plutôt que la décoloration à votre couleur d'arrière-plan en cours, changeant au noir et à la décoloration de retour dans les js seraient très semblables à ce qui précède:.

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

Garder le temps il n'y a probablement pas nécessaire, mais bon, il est un autre garde-fou contre le navigateur en cache « l'image ».

Answer 2

Depuis votre script php retourne la source de la nouvelle image, vous pourriez être mieux éviter d'utiliser load() et utiliser un simple appel ajax qui échange la source de l'image.

var img=$('#image');//cache the element

function refreshNotification(){
  $.ajax({
    url: 'http://mydomain.com/images/rotate.php',
    success: function(src){
      img.attr({src: src});
    }
  });
}

setInterval(refreshNotification, 10000);

Answer 3

Quelque chose comme cela pourrait fonctionner, en supposant que votre script PHP retourne simplement l'URL de l'image:

$(document).ready(function(){
    window.setInterval(switchImage, 10000);

    function switchImage() {
        var rn = Math.floor(Math.random() * 100000)
        $.get('http://mydomain.com/images/rotate.php', 
              { n: rn }, 
              receiveNewImage);
    }

    function receiveNewImage(src) {
        $('#image').fadeTo(1000, 0.0, function() { switchAndFadeIn(src); } );
    }
    function switchAndFadeIn(newSrc) {
        $('#image').attr('src', newSrc).fadeTo(1000, 1.0);
    }
});

EDIT:. Ajout paramètre aléatoire

EDIT: Dans votre PHP, fait quelque chose comme ça aide

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Expires data in the past

Answer 4

Comment définir la fonction au sujet de swapImage() en dehors du bloc $(document).ready()?

<script type="text/javascript" scr="path/to/jquery.js"></script>
<script type="text/javascript">
function swapImage(){
    var time = new Date();
    $('#rotate').fadeOut(1000)
     .attr('src', 'rotate.php?'+time.getTime())
     .fadeIn(1000);
}
$(document).ready(function(){
  var imageInterval = setInterval('swapImage()',5000);
});
</script>

<img src="rotate.php" id="rotate" />

Answer 5

$("#image").each(function({
$(this).fadeOut(function() { 

$(this).attr("src", "http://mydomain.com/images/image.jpg"); 
$(this).load(function() { $(this).fadeIn(); }); // this should be on the bottom....
}); 
})

Vérifier chaque fonction sur JQ chaque

Je l'ai mis à jour le script je pense que cela devrait fonctionner parce que vous attendez une image à charger, mais il ne dispose pas d'une source ... vérifier cela> <img onerror="alert('there was an error') />" si vous obtenez l'erreur, cela signifie que la source n'existe pas. BTW vous ne devriez pas utiliser le #image si vous prévoyez d'utiliser plusieurs images comme il peut y avoir un identifiant unique sur votre html sinon vous obtiendrez des conflits

espérons que cette aide

Answer 6

Votre configuration manque l'étape de dire jQuery ne pas mettre en cache la requête AJAX. Il y a un paramètre « cache » qui peut être ajouté à un appel AJAX pour forcer pour saisir une nouvelle copie:

$.ajax({
  url: 'http://mydomain.com/images/rotate.php',
  cache: false,
  success: function(src){
    img.attr({src: src});
  }
});