加载后不更改为图像（图像库）-Javascript

很长一段时间以来，我一直在用PHP和Javscript开发一个图像库。画廊的“卖点”在于它预先加载了图片，所以当你切换到下一张图片时，你不必重新加载页面，而且几乎是即时的

问题是，当前当您切换到尚未加载的照片时，它会加载之前的所有图像。我想加载当前应显示给查看器的图像。但是，即使控制台说当前图像已加载（console.log messages我已设置），它也不会切换，直到加载之前的所有其他照片

一个有问题的问题。 我将把一些最重要的代码放在这里，因为我不想给出所有的代码

此函数加载图片将下一张照片添加到隐藏的图片容器中。问题是，当当前照片加载后，它不会更改。您可以在页面中通过查看控制台并使用箭头键一直转到最后一张照片来测试这一点

    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。（我之所以包括这个，是因为它解释了额外的控制台日志）

---

感谢您阅读所有这些。我知道它很长。

你可以试试这样的东西，我在最近开发的一个移动图库中使用了它

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

var-imageList=$（'#imageList'）//div标签的id
imageList.empty（）；
var imageFiles=''；
imageFiles=$.parseJSON（imageFiles）//转换为json以提高javascript可读性
var图像=[]；
对于（i=0；i如果我错了，请更正我，但这不是一次加载所有图像吗？关于我的图像库的另一个特定点是，它一次只加载一个图像，从而允许您更快地查看下一个图像。它一次加载所有图像是的，但您可以在加载后立即显示第一个图像。其他图像直到你设置了一个循环中增加或减少的点击功能。我会在我可以编辑我的帖子时添加该代码。我不确定我是否理解。按照我的图库的工作方式，它一次只能加载一个图像。我对你所说的理解是，它将加载主图像，然后同时加载所有图像。y是的，它们已加载，但在循环增加之前不会追加。抱歉，如果这没有帮助的话。我不确定你在问什么。我可能读错了你的代码，但在任何阶段都没有设置当前照片的值（除了最后一个片段）。当我浏览时，控制台中的所有内容都是“当前照片已加载”和“已加载：x”其中x是要加载的正确照片（我猜）。@djlumley：不，你没有读错代码。通过“设置当前照片的值”，你的意思是将主图片src设置为当前图片还是更改当前图片的加载状态？要查看加载的错误照片，你可以按向右箭头一直到最后一张图片（查看右上角）并查看控制台。
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]);

<?php

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

$images_js = json_encode($images);
?>

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