使用 Ajax 延迟加载答案

【问题标题】：Using Ajax lazy load使用 Ajax 延迟加载
【发布时间】：2013-05-04 21:43:21
【问题描述】：

我创建了一个数据库来存储所有图像的名称，以便以后可以检索它。为了检索图像的名称，我使用 ajax 并将其与<img> 标签绑定：

$.post('image_name.php',{id:id}, function(data){
   $('#container').html('<img src="img/'+data+'">');
});

一切都很好。但我注意到的是，所有图像同时显示，这会稍微减慢这个过程。因此，我认为处理此问题的最佳方法是使用延迟加载。我想要任何可以显示的数据....但我不知道如何显示。

附加信息：我正在尝试创建缩略图列表。就像 Imgur 侧边栏 (http://imgur.com/gallery/19E2ZAX)

【问题讨论】：

使用 jQuery 插件怎么样？ appelsiini.net/projects/lazyload
我不想延迟加载图像，我想延迟加载从数据库中检索的数据
好的...澄清一下，您想延迟加载屏幕上不可见的图像源代码吗？
我正在尝试延迟加载此数据“函数（数据）”。延迟加载图像是一个不同的主题。
当你的图像应该被加载时应用你的代码，或者如果你只想延迟加载 src 数据，只设置像 $("img").attr("src",data 这样的数据)

标签： php jquery ajax lazy-loading

【解决方案1】：

如果你打算用左/右键创建一个列表：

使用 ajax 获取接下来 6 个图像的数组。只有名称或 ID。
关于 ajax 成功：
- 在 jquery 中为图像数组 $(array).each 创建一个循环很好！
- 在循环循环中为每个图像设置一个时间计时器（http://archive.plugins.jquery.com/project/timers 很棒）。使用数组索引*间隔*1000（1000毫秒1秒）

整个想法是：

onsuccess:
    $(whatyougotfromajax).each(function(index, value)
    {
        $.oneTime(index * Interval * 1000, function()
        {
            $('#block').append('<img src="sth.php?Id=' + value + '">');
        });
    });

我不确定...不，我确定它不能以这种方式工作，但你明白了

【讨论】：