任何参考如何在不滞后的情况下在 jquery 中加载图片？答案

【问题标题】：Any references how to load pictures in jquery on swift not lagging?任何参考如何在不滞后的情况下在 jquery 中加载图片？
【发布时间】：2017-03-30 18:05:29
【问题描述】：

我没有任何问题，例如错误，但在页面上太滞后了。这是我的js：

$(document).ready( function() {
photosdone();

});

function photosdone() {
     setTimeout( function() { 
     photosupdates();
     photosdone();
     }, 800);

}

function photosupdates() {
$.getJSON("check_photos.php", { id:  $("#id").val() },function(data) {
    $("#photos").empty();
    $.each(data.result, function(){
    $("#photos").append("<li class='col-lg-3 col-md-3 '><img class='img-responsive' src='data:"+this['MIME']+";base64,"+this['img']+"' width=150px height=150px></li>");

    });
});
}

这是我的页面：

<ul id="photos" class="row bar">
</ul>

虽然页面没有图片，但它也在运行。但是当我上传一些超过2张的图片时，我觉得我的页面虽然出现了几次，但还是卡住了。

【问题讨论】：

递归？加载时，您调用 photosdone

标签： javascript jquery

【解决方案1】：

在 photosdone() 中再次调用 photosdone() 可以吗？递归的 photodone 调用使您的页面滞后

【讨论】：

是的，我想是的。我能怎么做？有什么方法可以实时加载图片但大大减少网络流量？
您也可以尝试将 setTimeout 和递归更改为 $(document).ready( function() { setInterval(function () { photosupdates(); }, 800) });
如果您需要实时更新您的内容，请查看stackoverflow.com/questions/14051795/…

【解决方案2】：

您不应每 800 毫秒返回 JSON 响应中的所有图像，而应该只返回它们的 url。这不仅会大大减少网络流量，还会允许浏览器缓存图像。此外，base64 编码的字符串比二进制图像数据大得多（大约 33%）。

$("#photos").append("<li class='col-lg-3 col-md-3 '><img class='img-responsive' src='"+this['url']+"' width=150px height=150px></li>");

【讨论】：

是的，我想是的。我能怎么做？有什么方法可以实时加载图片但大大减少网络流量？
当您说实时时，您是指在单个响应中发送 JSON 和图像吗？不，那是不可能的。您首先需要获取 JSON 文件，读取它的图像 url，然后单独加载它们。但我很确定这会大大提高速度。如果在收到 JSON 响应之后调用 photosdone() 会更好，而不是之前。附言。编辑了我的答案。