Question

我目前正在开发一个基本图片库，按以下顺序动态加载新图片（在document.ready上）：

使用ajax调用来获取JSON，其中包含动态呈现图像所需的所有信息。

迭代JSON对象以创建正确的div / img元素，然后将其附加到页面。

            $.ajax({
            url: '/wp-content/themes/base/library/ajax/posts-json.php',
            type: 'get',
            //dataType: 'json',
            success: function(data) {
                // turn string response to JSON array
                window.responseArray = JSON.parse(data);

                window.lastPhotoIndex = 0;

                // make sure there is a response
                if (responseArray.length > 0) {
                    // get container
                    var container = document.getElementById("photos-container");
                    var ulElement = document.createElement('ul');
                    ulElement.className = "rig columns-3";
                    ulElement.setAttribute("id", "photo-list");

                    // iterate over each response
                    window.photoCount = 0;
                    for (var i = 0; i < responseArray.length; i += 1) {
                        // Only load first 10 images
                        if (responseArray[i]["post-type"] == "photo" && photoCount < 20) {
                            // Set the last photo index to this photo
                            lastPhotoIndex = i;
                            // create the li
                            var liElement = document.createElement("li");

                            liElement.className = liElement.className + responseArray[i]["day"];

                            //create class name string from WP tags
                            if (responseArray[i].tags.length > 0) {
                                for (var ii = 0; ii < responseArray[i].tags.length; ii += 1) {
                                    nospaceTagName = responseArray[i].tags[ii].split(' ').join('');
                                    liElement.className += " " + nospaceTagName;
                                }
                            }

                            //create image element and append to div
                            var imgTag = document.createElement("img");
                            imgTag.src = responseArray[i]["thumb-url"];
                            liElement.appendChild(imgTag);

                            //Add modal class info to outer div
                            liElement.className += " md-trigger";
                            //Add data-modal attribute to outer div
                            liElement.setAttribute("data-modal", "photo-modal");

                            ulElement.appendChild(liElement);

                            //next slide
                            photoCount++;
                        }
                    }
                    //append ul to container
                    container.appendChild(ulElement);
                }
            },
            error: function(xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }

        });// end ajax call

在ajax调用之后，我添加了一个窗口滚动事件，当JSON对象中还有更多照片时，将调用该事件。

            // Window scroll event
        $(window).scroll(function () {
            var trigger = $(document).height() - 300;
            if (trigger <= $(window).scrollTop() + $(window).height()) {
                //Call function to load next 10
                loadNextPhotos();

            }
        });

滚动调用的函数甚至只是从前面的左关闭索引开始（在ajax调用开始时设置的lastPhotoIndex变量 - 'window.lastPhotoIndex'）。该函数如下所示：

function loadNextPhotos() {
if (photoCount < getPhotoCount()) {
    var photosOutput = 0;
    var startingIndex = lastPhotoIndex + 1;
    var photoList = $('#photo-list');
    for (var i = startingIndex; i < responseArray.length; i += 1) {
        if (responseArray[i]["post-type"] == "photo" && photosOutput < 10) {
            lastPhotoIndex = i;
            photosOutput++;
            // create the li needed
            var element = document.createElement("li");

            element.className = responseArray[i]["day"];

            //create class name string from tags
            if (responseArray[i].tags.length > 0) {
                for (var ii = 0; ii < responseArray[i].tags.length; ii += 1) {
                    nospaceTagName = responseArray[i].tags[ii].split(' ').join('');
                    element.className = element.className + " " + nospaceTagName;
                }
            }

            //create image element and append to li
            var imgTag = document.createElement("img");
            imgTag.src = responseArray[i]["thumb-url"];


            element.appendChild(imgTag);

            //Add modal class info to li
            element.className = element.className + " md-trigger";
            //Add data-modal attribute to outer div
            element.setAttribute("data-modal", "photo-modal");

            photoList.append(element);

            // Keep track of photo numbers so modal works for appropriate slide number
            photoCount++;
        }
    }
}

}

请记住，此代码从完整的应用程序中删除了很多。它适用于Chrome，Safari，Firefox，IE10 +。

在IE9中加载时，当我点击滚动事件并向UL添加更多项目时，我遇到了疯狂的内存泄漏。

我的猜测是，在创建要追加的新项目时，我没有遵循最佳做法，而且他们在内存中停留的时间超出了应有的时间。唯一的问题是我不知道如何解决它/调试它，因为在IE9中页面崩溃如此之快。

任何帮助都会很棒。谢谢！

修改

我尝试过实施Darmesh的解决方案并没有真正的运气。正如我在评论中所说，它只会延迟内存泄露的速度。我还在滚动事件之上添加了jquery.visible.js，所以看起来像这样：

$(window).scroll(function () {
if($('#lazy-load-trigger').visible() && window.isLoadingPhotos != true) {
    console.log("VISIBLE!");
    loadNextPhotos();
}

}）;

但它也只会延迟内存泄漏。我仍然认为IE9中的垃圾收集存在问题，但我不确定如何排除故障。

Answer 1

我认为这是由于浏览器每次滚动时多次同时调用loadNextPhotos函数。这可能有用，试一试，

function loadNextPhotos() {
    // Add flag to indicate new photos adding started
    window.isLoadingPhotos = true;
    ....
    ....
    ....
    ....
    // Indicate new photos adding completed
    window.isLoadingPhotos = false;
}

和

$(window).scroll(function () {
    var trigger = $(document).height() - 300;
    if (trigger <= $(window).scrollTop() + $(window).height()) {
        if(!window.isLoadingPhotos) {
            //Call function to load next 10
            loadNextPhotos();
        }
    }
});

自定义延迟加载 - IE9内存泄漏

1 个答案: