javascript - 仅当用户上传新图像时才用新图像更新 div

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

您需要将结果数据存储在变量或类似 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();
});