自定义 JS 图像查看器在每次按下“下一步”键后加载速度较慢

custom js image viewer is loading slower after each "next" key press

本文关键字：下一步 加载 速度 图像 JS 自定义      更新时间：2023-09-26

我构建了一个运行良好的自定义图像查看器，但是每次使用箭头查看下一个或上一个图像时，它的加载速度越来越慢。到第 10 张图像时，可能需要几分钟，甚至冻结。我用来打开查看器的片段与我用来移动到下一个图像的片段相同，每次打开总是快如闪电;只有当我使用箭头键时，它才会变慢。有时.php文件根本不会加载，它只会说"未定义"，我相信这是来自 JS 的某个地方？

function image_load(id) {
    $('.view').empty().load(image-viewer.php?id='+id, function() {
        $(document).keyup(function(e) {
            if (e.keyCode == 39) { 
                var next = $('#next').attr('alt');
                if(next != "null") {
                    image_load(next);
                    return false;
                }
            }
            if (e.keyCode == 37) { 
                var prev = $('#prev').attr('alt');
                if(prev != "null") {
                    image_load(prev);
                    return false;
                }
            } 
        });
    }); 
}

因此，下一个/上一个引用它们所包含的函数。它是否以某种方式创建了一个无限循环并减慢了处理器的速度？

根据我的评论，您正在创建一个无限循环，因为您一遍又一遍地重复绑定关键事件。你应该做的是将函数声明与事件处理程序分开：

var image_load = function(id) {
    $('.view').empty().load('image-viewer.php?id='+id);
};
$(document).keyup(function(e) {
    // Prevent default key actions
    e.preventDefault();
    // Evaluate pressed keys
    if (e.keyCode == 39) { 
        var next = $('#next').attr('alt');
        if (next) image_load(next);
    } else if (e.keyCode == 37) { 
        var prev = $('#prev').attr('alt');
        if (prev) image_load(prev);
    } 
});
相关文章：