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

Question

我长期以来一直致力于 PHP 和 Javscript 的图像库工作。该图库的“卖点”是它会预先加载图像，因此当您切换到下一张图像时，您不必重新加载页面并且它几乎是瞬时的。

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

有问题的示例页面。 我将在这里放置一些最重要的代码，因为我不想给出所有代码。

此函数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;
                }
            });
    }