جيعي و PHP صورة معدنية لغز

Question

لغز مسج.

لدي برنامج نصي PHP الذي يرجع اسم صورة JPG عشوائية من مجلد. من الجميل لأنني لا أملك إعادة تسمية الصور على الإطلاق؛ أنا فقط أسقطها في المجلد ويعمل العوامل العوامل العوامل العشوائية. الآن، أدعو البرنامج النصي مثل هذا - http://mydomain.com/images/rotate.php. - وعلى إعادة تحميل صفحة ويب بسيطة، فإنها تبادل الصور.

ولكن أود أن أعمل به مع جيسي في ذلك، أود الحصول على مبادلة الصورة في صورة جديدة على فاصل زمني عشر ثوان أو نحو ذلك، وكذلك تتلاشى منها وتتلاشى.

تحرير 1/23/10:

هذا يعمل عن طريق تبادل في spacer.gif. قد يكون هناك حل أكثر أناقة، ولكن هذا يعمل بالنسبة لي. أكدت مونش بها، عن طريق الفكرة من قبل منتصف الليل:

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

وهذا هو 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

الجانب السلبي الذي أراه للقيام بذلك مثل هذا هو أنه ستكون هناك فترة تحميل للصورة الجديدة وقد تكون الرسوم المتحركة جانبا قليلا بسبب ذلك. قد يكون من المفيد أن يكون لديك جزأين لهذا الملف حيث يتم إرجاع المسار إذا كانت قيمة $ _GET تساوي شيء واحد، ويتم إرجاع الصورة إذا لم يتم تعيين قيمة $ _Get أو أنها تساوي شيئا آخر. وبهذه الطريقة يمكنك تحميل سلسلة من الصور وستكون هناك رسوم متحركة أكثر سلاسة بين الصور.

بعد أن قال ذلك، يبدو لي أن شيئا مثل هذا يجب أن يعمل.

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

الوقت يجعل الأمر حتى يعتقد المتصفح أنه يحصل على صورة جديدة.

spacer.gif.

للقيام بذلك مع فاصل أسود، أوصي بتفويل صورتك في DIV وإعطاء Div A # 000 لون الخلفية لتتناسب مع SPACER:

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

من شأنه أن يجعلها الصورة تلاشى فعلا إلى الأسود، بدلا من يتلاشى لون خلفيتك الحالي، وتغيير إلى الأسود، والتخلى مرة أخرى. ستكون JS مشابهة جدا لما سبق:

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

الاحتفاظ بالوقت الموجود فيه ربما ليس ضروريا، ولكن مهلا، إنه حراسة آمنة أخرى ضد المستعرض تخزينها "الصورة".

Answer 2

نظرا لأن برنامج PHP الخاص بك هو إرجاع مصدر الصورة الجديدة، فقد تكون أفضل لتجنب استخدام load() واستخدم مكالمة AJAX البسيطة التي تبادل مصدر الصورة.

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

قد يعمل شيء من هذا القبيل، على افتراض أن البرنامج النصي PHP الخاص بك ببساطة إرجاع عنوان URL للصورة:

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

تحرير: أضيفت المعلمة عشوائية.

تحرير: في PHP الخاص بك، هل هناك شيء من هذا القبيل؟

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

Answer 4

ماذا عن تعريف swapImage() وظيفة خارج $(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....
}); 
})

تحقق من كل وظيفة على JQكل

لقد قمت بتحديث البرنامج النصي الذي أظن أنه يجب أن يعمل لأنك تنتظر تحميل صورة، لكنها لا تحتوي على مصدر ... تحقق من ذلك خارج> <img onerror="alert('there was an error') />"إذا حصلت على الخطأ، فهذا يعني أن المصدر غير موجود. BTW يجب أن لا تستخدم #image إذا كنت تخطط لاستخدام صور متعددة لأن هناك معرف فريد واحد على HTML الخاص بك وإلا فسوف تحصل على تعارضات

أتمنى أن يساعدك هذا

Answer 6

يفتقد الإعداد الخاص بك خطوة إخبار JQuery بعدم ذاكرة التخزين المؤقت لطلب AJAX. هناك المعلمة "ذاكرة التخزين المؤقت" التي يمكن إضافتها إلى دعوة AJAX لإجبارها على الاستيلاء على نسخة جديدة:

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