4

jQuery拼图

我有一个 php 脚本，它从文件夹中返回随机 jpg 图像的名称。这很好，因为我根本不需要重命名图像；我只是把它们放在文件夹中，随机发生器就可以工作了。现在，我像这样调用脚本 - http://mydomain.com/images/rotate.php - 在一个简单的网页重新加载时，它会交换图像。

但我想让它与 jQuery 一起工作，因为我想让图像以十秒左右的间隔换成一个新图像，并且还让它们淡入淡出。

2010 年 1 月 23 日编辑：

这可以通过交换 spacer.gif 来实现。可能有一个更优雅的解决方案，但这对我有用。蒙克通过 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);

这是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);
    }
}

?>
4

6 回答 6

4

我看到这样做的缺点是新图像会有一个加载期，因此动画可能有点古怪。如果 $_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); 
});

时间使浏览器认为它正在获取新图像。

间隔.gif

要使用黑色分隔符执行此操作，我建议将您的图像包装在 div 中，并为 div 提供 #000 背景颜色以匹配分隔符：

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

保留时间可能没有必要，但是，嘿，这是防止浏览器缓存“图像”的另一个安全措施。

于 2010-01-18T07:48:39.547 回答
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);
于 2010-01-11T07:08:32.517 回答
1

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" />
于 2010-01-21T21:21:10.053 回答
1

假设您的 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
于 2010-01-11T07:08:23.410 回答
0 
$("#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 Each上的每个功能

我已经更新了脚本，我认为它应该可以工作，因为您正在等待加载图像，但它没有源...检查一下 ><img onerror="alert('there was an error') />" 如果您收到错误，则表示源不存在。顺便说一句，如果您打算使用多张图片，则不应使用#image，因为您的 html 上可能有一个唯一的 id，否则您会遇到冲突

希望这可以帮助

于 2010-01-11T12:15:11.703 回答
0

您的设置缺少告诉 jQuery 不要缓存 AJAX 请求的步骤。有一个“缓存”参数可以添加到 AJAX 调用中以强制它获取新副本：

$.ajax({
  url: 'http://mydomain.com/images/rotate.php',
  cache: false,
  success: function(src){
    img.attr({src: src});
  }
});
于 2010-01-19T18:58:14.130 回答