php - Javascript/PHP を使用して画像に時間間隔を設定する

Question

PHPでページの読み込み時にすでにランダムに選択された画像に対して、Javascriptを使用して時間間隔を設定しようとしています。明らかに、PHP を使用して時間間隔を設定することはできません。したがって、画像はPHPを使用してランダムに選択されますが、ランダムに選択されてページが読み込まれると、Javascriptが引き継ぎ、20秒間隔でランダムに選択された新しい画像を生成したいと思います.

おそらく、PHP のアイデア全体を破棄して、Javascript を完全に使用することもできますが、これを機能させることができるかどうかを知りたいと思っています。

以下は私のPHPコードです：

    <?php

 $img_rand = array(
  1 => array(
     'url' => 'www.tautic.com/', 
    'img' => '1.jpg', 
    'wth' => '472',        
    'hgt' => '100',      
  'ttl' => 'Tautic',    
    'alt' => 'Tautic'  
   ),                              
   2 => array(
     'url' => 'www.designspark.com/', 
    'img' => '2.jpg', 
    'wth' => '472',        
    'hgt' => '100',        
  'ttl' => 'Design Spark',    
    'alt' => 'Design Spark'  
  ),
  3 => array(
     'url' => 'www.involutionstudios.net/',
    'img' => '3.jpg',
    'wth' => '472',        
    'hgt' => '100',        
  'ttl' => 'Involution Studios - Web Design',   
    'alt' => 'Involution Studios - Web Design'  
   ),
    4 => array(
     'url' => 'www.explorestem.co.uk/', 
    'img' => '4.jpg', 
    'wth' => '472',     
    'hgt' => '100',        
  'ttl' => 'Explore Stem',    
    'alt' => 'Explore Stem' 

   ),
   ); 

   $img = array_rand($img_rand); 
   echo('      
   <div class="random-img">    
   <a href="http://'.$img_rand[$img]['url'].'" title="'.$img_rand[$img]['ttl'].'"                  
   target="_blank">
    <img src="sponsorimg/'.$img_rand[$img]['img'].'" width="'.$img_rand[$img]['wth'].'"          
   height="'.$img_rand[$img]['hgt'].'" alt="'.$img_rand[$img]['alt'].'" /> 
  </a>
  </div>
  ');

   ?>

前もって感謝します。

score 1 · Accepted Answer

PHP で配列を使用する際の問題は、PHP のみが配列にアクセスできることです。つまり、JavaScript はどの URL をロードするかを認識していません。したがって、php を保持するつもりなら、以下のオプション 1 を使用します。それ以外の場合は、php を破棄してオプション 2 を使用します。

オプション1

メインビューで ajax を使用し、php を別にしておく必要があります。PHPページで、画像を出力する代わりに、画像情報をJSONオブジェクトとして出力します。

$img = array_rand($img_rand);
header('Content-type: application/json');
echo json_encode($img);

次に、すべてを表示しているページで、javascript を使用して (ajax が簡単になるため、jQuery を使用しています)、画像を読み込みます。

<div class="random-img"></div>
<script type="text/javascript>
imgLoop = function() {
    $.get('randomimage.php', function(img) {
        var el = '<a href="http://'+img.url+'" title="'+img.ttl+'" target="_blank">';
        el += '<img src="sponsorimg/'+img.img+'" width="'+img.wth+'" height="'+img.hgt+'" alt="'+img.alt+'" /></a>';
        $('.random-img').empty().append(el);
    });
};
setInterval(imgLoop, 20000);
</script>

オプション2（より良いimo）

ソースを表示しようとした場合に画像の配列が表示されないようにしようとしている場合を除き、オプション 1 では ajax/php は完全に不要です。php を完全に廃棄して、画像をオブジェクトの配列として保存することができます。、例えば

images = [
    {
        'url': 'www.tautic.com/', 
        'img': '1.jpg', 
        'wth': '472',        
        'hgt': '100',      
        'ttl': 'Tautic',    
        'alt': 'Tautic'
    },
    {
        'url': 'www.designspark.com/', 
        'img': '2.jpg', 
        'wth':'472',        
        'hgt':'100',        
        'ttl':'Design Spark',    
        'alt':'Design Spark'
    }
    //And so on..
];

そして、間隔については、次を使用します。

<div class="random-img"></div>
<script type="text/javascript>
imgLoop = function() {
    var img = images[Math.floor(Math.random() * images.length)];
    var el = '<a href="http://'+img.url+'" title="'+img.ttl+'" target="_blank">';
    el += '<img src="sponsorimg/'+img.img+'" width="'+img.wth+'" height="'+img.hgt+'" alt="'+img.alt+'" /></a>';
    $('.random-img').empty().append(el);
};
setInterval(imgLoop, 20000);
</script>

これが理にかなっている場合、または質問がある場合はお知らせください:)

score 0 · Accepted Answer

完全な JavaScript ソリューションが必要な場合は、配列をクライアントに保持する必要があります。

HTML / PHP ファイルで動的フィールドを空白のままにし、javascript からロードします。

<div class="random-img">
    <a target='_blank' title='' href='' >
        <img id='imageToLoad' src='' height='' width='' alt='' />
    </a>
</div>

イベントバインディング用に JQuery を追加しましたが、必要に応じてプレーンな JavaScript に変更できます。

ここでは、イメージのロードイベントが監視されます。次のランダムなイメージは、ロードまたはエラーイベントから 20 秒のタイムアウト後にロードされます。タイムアウトは前のイメージのロード後にのみ呼び出されるため、使用setTimeoutには利点があります。setInterval

loadImage関数は、最初にイメージをロードするために明示的に 1 回呼び出されます。

$(document).ready(function () {
    $('#imageToLoad').on('load', function(e){
       var imageElem = this;
        setTimeout(function(){
            loadImage(imageElem);
        }, 20 * 1000);
    }).on('error',function(e){
       var imageElem = this;
        setTimeout(function(){
            loadImage(imageElem);
        }, 20 * 1000);
    });

    function loadImage(imageElem){
        imageElem = imageElem || $('#imageToLoad').get(0);
        var rndImage = imageArr[Math.floor(Math.random() * imageArr.length)];
        imageElem.src = rndImage.img;
        imageElem.height = rndImage.hgt;
        imageElem.width = rndImage.wth;
        imageElem.alt = rndImage.alt;
        imageElem.parentNode.href = rndImage.url;
        imageElem.parentNode.title = rndImage.ttl;
    }

    var imageArr = [{
        'url' : 'www.tautic.com/', 
        'img' : '1.jpg', 
        'wth' : '472',        
        'hgt' : '100',      
        'ttl' : 'Tautic',    
        'alt' : 'Tautic'
    },{
        'url' : 'www.designspark.com/', 
        'img' : '2.jpg', 
        'wth' : '472',        
        'hgt' : '100',        
        'ttl' : 'Design Spark',    
        'alt' : 'Design Spark'
    },{
        'url' : 'www.involutionstudios.net/',
        'img' : '3.jpg',
        'wth' : '472',        
        'hgt' : '100',        
        'ttl' : 'Involution Studios - Web Design',   
        'alt' : 'Involution Studios - Web Design'
    },{
        'url' : 'www.explorestem.co.uk/', 
        'img' : '4.jpg', 
        'wth' : '472',     
        'hgt' : '100',        
        'ttl' : 'Explore Stem',    
        'alt' : 'Explore Stem'
    }];

    loadImage();
});

実施例

php - Javascript/PHP を使用して画像に時間間隔を設定する

3 に答える 3

オプション1

オプション2（より良いimo）

Related

Reference