加載後不會更改爲圖片（圖片庫） - Javascript

Question

我一直在使用PHP和Javscript中的圖片庫很長一段時間。畫廊的「賣點」是它預加載圖像，因此當您切換到下一張圖像時，您不必重新加載頁面和它幾乎是瞬間的。

問題是，當您切換到尚未加載的照片時，它會加載之前的每張圖像。我想加載應該當前顯示給觀衆的圖像。但即使當控制檯顯示當前圖像已加載（我設置的console.log消息）時，它仍會在加載之前切換到所有其他照片。

有問題的example page。 我會把一些最重要的代碼放在這裏，因爲我不想給出所有的代碼。

此功能load_image將下一張要加載的照片添加到hidden_​​container中。問題是當current_photo加載時，它不會改變。您可以通過查看控制檯並使用箭頭鍵一直走到最後一張照片來在頁面中測試。

function load_image() { 
    // find the next photo to load 
    var next_to_load = next_photo_to_load(); 
    //stop condition: 
    if (next_to_load == null) 
     return false; 

    if (img[current_photo]['loaded'] == 0) { 
     console.log("current_photo: "+current_photo); 
     next_to_load = current_photo; 
     console.log("next_to_load: "+next_to_load) 
    } 
    else { 
     console.log("*current_photo loaded*"); 
     $("main_img").src = img[current_photo]['img']; 
    } 

    img[next_to_load]['loaded'] = 1; 
    var url = img[next_to_load]['img']; 
    var image = new Image(); 
    image.src = url; 
    image.onload = function() { 
     load_image(); 
    }; 

    document.getElementById("hidden_container").appendChild(image); 
} 

此外，load_image最初在第一張照片加載此代碼時被調用。 （我包括這個，因爲它解釋了額外的控制檯日誌）。

img[current_photo]['loaded'] = 1; 
console.log("loaded:"+current_photo); 
load_image(); 

感謝您閱讀所有這些內容。我知道它很長。

Answer 1

你可以嘗試這樣的事情，我已經在最近開發的移動畫廊中使用過。

var imageList = $('#imagelist'); //id of div tag 
imageList.empty(); 
var imageFiles = '<?=$images_js?>'; 
imageFiles = $.parseJSON(imageFiles); //convert to json for javascript readability 

var images = []; 
for(i = 0; i<imageFiles.length; i++){ 
    var image = document.createElement('img'); 
    image.src = imageFiles[i]; 
    images.push(image); 
} 

var count = imageFiles.length; 
var i = 0; 

imageList.append(images[i]); 

你可以看到我在javascript中使用了一個php變量。我已經這樣做了，所以我可以讓這個JavaScript包含的php文件動態地讀取文件夾的內容。

php文件非常小，包括：

<?php 

$imagesDir = 'gallery/img/'; 
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE); 

$images_js = json_encode($images); 
?> 

這裏是在行動jQuery的：

$('#contentPlaylist').live('swipeleft swiperight',function(event){ 

    if (event.type == "swipeleft") { 
     imageList.fadeOut('slow', function(){ 
      imageList.empty(); 

      if(i != 0){ 

       i--; 
       imageList.append(images[i]);    
       imageList.fadeIn('slow'); 
      } 


      else{ 
       i = count - 1; 
       imageList.append(images[i]);    
       imageList.fadeIn('slow'); 

      } 
     }); 
    } 
    if (event.type == "swiperight") { 
      imageList.fadeOut('slow', function(){ 
       imageList.empty(); 
       i++;   
       if(i < count){ 

        imageList.append(images[i]);    
        imageList.fadeIn('slow'); 
       } 
       else{ 

        imageList.append(images[0]); 

        imageList.fadeIn('slow'); 
        var reset = 0; 
        i = reset; 
       } 
      }); 
    }