更改来源后如何判断图像何时完成渲染

Question

我正在开发一个Phonegap应用程序，在该应用程序中我试图向用户显示不同数量的图像。 我的GUI遵循中发现的原则这个文章。

我知道在发出ajax GET请求之前将获得多少图像，因此我使用jQuery的append方法将显示加载gif的正确数量的图像添加到相关的div中。 然后，我开始我的Ajax请求。

在我的成功回调中，我有以下方法

imageblock.forEach(function(entry)
{   
    changeImage(i, entry, i*1000);
    i++;                            
});

changeImage（）函数如下：

function changeImage(index, src, timeout)
{
    setTimeout(function()
    {
        $("#image"+index).attr("src", 'data:image/png;base64,'+src);
    },timeout);
}//changeImage

在不使用setTimeout（）的情况下，我观​​察到该应用在呈现图像时挂起。 这样就可以了，因为它显然给了浏览器足够的时间来渲染图像。

我想知道是否有比等待固定时间间隔加载下一张图像更好的方法。 我调查了onLoad（），但是当我最初创建显​​示加载gif的图像标签时，似乎触发了。 有什么方法可以告诉图像何时完成渲染？

Answer 1

您可以在Javascript中使用“ Image”类。 您可以通过创建Image类的新实例并添加“ onload”事件（在正确加载图像时调度此事件）来执行此操作。

样例代码：

function changeImage(index, src, timeout)
{
    setTimeout(function()
    {
        $("#image"+index).attr("src", 'data:image/png;base64,'+src);

        var img = new Image();

        img.src = 'data:image/png;base64,'+src;
        img.onload = function() {
            alert("Image loaded!");
        };
    }, timeout);
}//changeImage

Answer 2

我最近对此主题进行了研究，发现了一些解决方案，无论是在SO还是博客文章中。 我最终尝试了Paul Irish的解决方案 ，这似乎是最终的解决方案。 不幸的是，我从来没有让它在所有浏览器上都能正常工作，所以我只是把这个想法放在一边，并将定期检查是否存在在所有情况下都可以正常工作的东西...

Answer 3

您可以使用imagesloaded（ https://github.com/desandro/imagesloaded ）

使用imagesLoaded，您可以设置事件处理程序以知道何时加载图像。

var imgLoad = imagesLoaded("images_selector");
function onAlways( instance ) {
  console.log('all images are loaded');
}
imgLoad.on( 'always', onAlways );

Answer 4

这是我最终要做的事情：

我没有为每个期望的图像创建占位符加载图像，而是创建了一个加载图像，然后执行ajax GET。 在我的成功回调中，我将每个图像保存到一个数组中（在我的例子中，“图像”是base64编码的）。 将它们全部放入数组后，我将手动调用方法loadNextImage（i），该方法将创建一个具有onLoad属性onLoad =“ loadNextImage（i ++）”的新图像。 这似乎具有顺序加载每个图像的预期效果，并且不会减慢速度。

对于任何对此感兴趣的人都是我的新成功回调：

imageblock.forEach(function(entry)
{   
    images[i] = entry;
    i++;
    currentimagesdisplayed = i;
});
loadNextImage(0);

这是loadNextImage（）函数：

function loadNextImage(i)
{
    var id = 'image'+i;
    var src = 'data:image/png;base64,'+images[i];
    i++;
    var onload = 'loadNextImage(' + i + ')';
    if(!(i>images.length))
    {
        $('#TownClerkPortalResultsImages').prepend('<img height="50%" width="100%" id ="' + id + '" src ="' + src + '" onLoad="' + onload + '"  />');
    }//if
    else
    {
        $("#recordsloader").hide();
    }//else

我会弄乱一些css，看看是否无法使其看起来花哨并让它们淡入淡出。 如果仍然不能令人满意，我将调查其他答案。