Question

我有两个单独的页面：一个用户上传新图片，另一个用于通过ajax在div中加载图片。

脚本正在查看txt文件中的文件名，并且只获取第一个文件名（file_name2.jpg | file_name1.jpg）

这是脚本：

$(function(){
    var GALLERY = {
        container: "#gallery",
        url: "getImages.txt",
        delay: 10000,
        load: function(){
            var _gallery = this;
            var number = 1 + Math.floor(Math.random() * 9999999999);
            $.ajax({
                type: "get",
                url: this.url + '?rand=' + number,
                beforeSend: function(){
                    $(_gallery.container).find('img').remove();
                },
                success: function(data){
                    var images = data.split('|', 1);
                    $.each(images, function(){
                        _gallery.display(this);
                    });
                },
                complete: function(){
                    setTimeout(function(){
                        _gallery.load();
                    }, _gallery.delay);
                }
            });
        },
        display: function(image_url){
            $('<img />').attr('src', 'images/' + image_url).load(function(){
                $(this);
            }).prependTo(this.container);
        }
    }
    GALLERY.load();
});

问题是：即使没有上传新图像，脚本也会始终执行并替换图像。

理想情况下，图片只应在上传新图片时刷新。

我该如何实现这种行为？

Answer 1

在您的成功或显示功能中，添加代码以检查针对当前显示的图像文件名接收的图像文件名，并仅在它们不同时更新。

Answer 2

您需要将结果数据存储在变量中或类似GALLERY.lastdata，然后setTimeout将请求另一个，并查看新数据是否相同，图像不会刷新。

$(function(){
    var GALLERY = {
        lastdata : "",
        container: "#gallery",
        url: "getImages.txt",
        delay: 10000,
        load: function(){
            var _gallery = this;
            var number = 1 + Math.floor(Math.random() * 9999999999);
            $.ajax({
                type: "get",
                url: this.url + '?rand=' + number,
                success: function(data){
                       //detect new images
                      if(_gallery.lastdata != data){
                var images = data.split('|', 1);
                $.each(images, function(){
                          _gallery.lastdata = data;
                         _gallery.display(this);
                });
                       } 

                },
                complete: function(data){
                    setTimeout(function(){
                       _gallery.load();
                    }, _gallery.delay);
                }
            });
        },
        display: function(image_url){
            $('<img />').attr('src', 'images/' + image_url).load(function(){
                $(this);
            }).prependTo(this.container);
        }
    }
    GALLERY.load();
});

仅在用户上传新图像时才使用新图像更新div

2 个答案: