Question

所以我所做的是，我创建了一个使用XMLHttpRequest从数据库中检索数据（图像）的函数，并且每5000毫秒将其追加到td。现在，因为它们每5000毫秒被追加一次，如果检索到的数据没有改变，那么它会一次又一次地追加相同的数据。为了阻止它，我将自定义属性附加到带有ID的图像，但我不确定如何阻止它附加重复项目。这是我的JS：

function getAlbumImages() {
    var xhr2 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr2.open('GET', 'admin/images_data.php');

    xhr2.onreadystatechange = function(e) {
        if(xhr2.readyState == 4 && xhr2.status == 200) {
            var album_photos = JSON.parse(xhr2.responseText);
            for(var i = 0; i < album_photos.length; i++) {
                var td = document.createElement('td');
                var imagewrap = document.createElement('div');
                imagewrap.className = "image-wrap";
                    var imagemenu = document.createElement('div');
                    imagemenu.className = "image-menu";
                        var imagemenuimg1 = document.createElement('img');
                        imagemenuimg1.src = "img/edit_img.png";
                        var imagemenuimg2 = document.createElement('img');
                        imagemenuimg2.src = "img/close.png";
                    var imagewrapimg = document.createElement('img');
                    imagewrapimg.className = "thumbnail";
                    imagewrapimg.src = "admin/album_photos/" + album_photos[i].Image_Path;
                    imagewrapimg.setAttribute("data-image-id", album_photos[i].Image_ID);
                document.getElementById("tiare").appendChild(td);
                td.appendChild(imagewrap);
                imagewrap.appendChild(imagemenu);
                imagemenu.appendChild(imagemenuimg1);
                imagemenu.appendChild(imagemenuimg2);
                imagewrap.appendChild(imagewrapimg);
            }
        }
    }
    xhr2.send(null);
}

setInterval(function(){
    getAlbumImages();
}, 5000);

标记：

<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <!-- <div class="big_image" id="drop_zone">
            <img src="" id="big_img" />
        </div -->
        <div class="images_holder">
            <div class="header">
                Album Name - Photo Album
                <span class="close"><img src="img/close.png" /></span>
            </div>
            <div class="body">
                <table width="80%">
                    <tr id="tiare">

                    </tr>
                </table>
            </div>
        </div>
        <div id="drop_zone">
            Drag/Drop images to upload.
        </div>
        <div style="height: 30px; width: 80%; color: white; text-align: center; margin: 0 auto;">
            <p id="progress_bar" style="width: 0%; background-color: red;"></p>
        </div>
        <script src="js/script.js"></script>
    </body>
</html>

这是第一次发生的事情： enter image description here

以后会发生这种情况： enter image description here

查看重复的图片

如何阻止它附加重复的？提前致谢。：）

P.S：没有允许的声音。：）

Answer 1

在插入

之前，只需检查具有相同ID或URL的实例是否在页面上

        if(document.querySector('div.thumbnail[data-image-id="' + album_photos[i].Image_ID + '"]')){
            continue;
        }

或者将所有插入的id的列表保存在内存中（作为数组或对象{id：url}）并检查此项是否已加载

如何不插入重复的图像？

1 个答案: