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

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

1 个答案: