Question

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

我知道在制作ajax GET请求之前我将获得多少图像，因此我使用jQuery的append方法向相关div添加正确数量的图像以显示加载gif。然后我开始我的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类的新实例并添加“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

我最近研究了这个主题并找到了一些解决方案，是on SO还是博客文章。我最终尝试了the solution from 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。在我成功的回调中，我将每个图像保存到一个数组中（在我的例子中，'images'是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弄得乱七八糟，看看我是否能让它看起来很花哨，让它们淡入或有什么东西。如果这仍然不能令人满意，我会研究其他答案。

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

4 个答案: