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. C'est bien parce que je n'ai pas besoin de renommer les images du tout; Je les dépose juste dans le dossier et le randomizer fonctionne. En ce moment, j'appelle le script comme ceci - http://mydomain.com/images/rotate.php - et sur un simple rechargement de page web, il échange les images. Mais j'aimerais que cela fonctionne avec jQuery en ce sens que je voudrais que l'image permute dans une nouvelle image sur un intervalle d'environ dix secondes, puis les fondre et les fondre.

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 que je vois à le faire comme c'est qu'il y aura une période de chargement pour la nouvelle image et l'animation peut être un peu bizarre à cause de cela. Il peut être avantageux d'avoir deux parties dans ce fichier où un chemin est renvoyé si une valeur $ _GET est égale à une chose, et l'image est retournée si cette valeur $ _GET n'est pas définie ou si elle est égale à quelque chose d'autre. De cette façon, vous pouvez précharger une série d'images et il y aura une animation plus fluide entre les images.

Cela dit, il me semble que quelque chose comme ça 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 fait en sorte que le navigateur pense qu'il obtient une nouvelle image.

Espaceur.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 là-bas iSN probablement » t nécessaire, mais bon, c'est un autre garde- inst du navigateur en mettant en cache "l'image".

Answer 2

Quelque chose comme cela pourrait fonctionner, en supposant que votre script PHP retourne simplement l'URL 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: paramètre aléatoire ajouté.

EDIT: Dans votre PHP, est-ce que 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 3

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 4

$("#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érifiez chaque fonction sur JQ Each

J'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 ceci><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 5

Votre installation ne dispose pas de l'étape indiquant à jQuery de ne pas mettre en cache la requête AJAX. Il y a un 'cache' parameter qui peut être ajouté à un appel AJAX pour le forcer à prendre une nouvelle copie:

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

Answer 6

Que diriez-vous de définir la fonction 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" />