Ben böyle yapıyor görmek dezavantajı var, yeni görüntü için bir yük dönemi olacak ve animasyon yüzünden biraz tuhaf olabilir olmasıdır. Bir $ _GET değer bir şey eşit olduğunu ve $ _GET değeri ayarlamak veya başka bir şey eşit değilse görüntü döndürülür eğer bir yolu döner o dosyaya iki parça olması yararlı olabilir. Bu şekilde görüntüleri bir dizi önceden yüklemek verebilir ve görüntüler arasında daha yumuşak bir animasyon olurdu.

Böyle bir şey çalışması gerekir gibi geliyor bana, o söyledikten sonra.

$(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); 
});

Zaman o kadar tarayıcısı yeni bir görüntü oluyor düşündürüyor.

Spacer.gif

Siyah bir ayırıcı ile bu yapmak için ben bir div içinde görüntü sarma ve div boşluk eşleşen # 000 arka plan rengini vermek tavsiye ederim:

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

Bu daha ziyade, mevcut arka plan rengi solmaya siyah değişen ve yukarıda çok benzer olacağını Lütfen js içeri solan daha çok görüntü aslında siyah soluk yapacak:

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); 

Orada zaman tutmak muhtemelen gerekli değildir, ama hey, bu "görüntü" önbelleğe tarayıcısına karşı başka güvenli görevlisi.

Php komut yeni görüntünün kaynağını dönen olduğundan, load() kullanarak önlemek ve görüntünün kaynağını değiştirir basit bir ajax arama kullanmak iyi olabilir.

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);

Böyle bir şey PHP script basitçe, resmin URL'sini döndürür varsayarak işe yarayabilir:

$(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: Eklendi rastgele bir parametre.

EDIT: PHP, bu yardım gibi bir şey yapar?

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

Dışında swapImage() fonksiyonunu tanımlama hakkında $(document).ready() nasıl engellenir?

<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" />

$("#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....
}); 
})

JQ her işlevi kontrol Each

I have updated the script i think it should work because you are waiting for an image to load, but it doesn't have a source... check this out > <img onerror="alert('there was an error') />" if you get the error it means that the source doesn't exist. btw you should not use the #image if you are planning to use multiple images as there can be one unique id on your html otherwise you will get conflicts

Bu yardımcı olur umarım

Kur AJAX isteği önbelleğe değil jQuery söylüyorum adımı eksik. Bir 'cache' parameter Bu yeni bir kopyasını kapmak için zorlamak için bir AJAX çağrısı eklenebilir var:

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