用于预加载图像的 Queue.js 一直在等待？ （打回来）

Posted 2023-05-07

【中文标题】用于预加载图像的 Queue.js 一直在等待？ （打回来）

【英文标题】：Queue.js to preload images is waiting forever? (Callback)

【发布时间】：2013-08-07 12:13:45

【问题描述】：

我正在使用mbostock queue.js script 加载几个 json 文件，方法如下：

var q = queue()
.defer(d3.json, "world-110m.json")
.defer(d3.tsv, "world-country-names.tsv")
.await(ready);

其中 ready 是加载所有内容时要执行的函数。

我想通过添加延迟来预加载图像。这可能吗？我试了好几种方法，都不行。

我认为必须创建一个函数，但我不能让它异步，并且队列一直在等待......

【问题讨论】：

您提到了一些您尝试过的代码。您可以发布其中的一个或多个吗？还解释了为什么将图像集成到 queue.js 与使用一些现有的图像预加载方法的更多背景。

我尝试了类似 .defer(myFunc, "myImg.png");其中 myFunc = function(src)var img = new Image(); img.src = src; img.onload = function()return true; 。和一些变化。代码已执行，但就像我没有向 await() 发送正确的信号

【参考方案1】：

这是 queue.js 对 the callbacks 的期望：

回调遵循 Node.js 约定，其中第一个参数是可选的错误对象，第二个参数是任务的结果。

因此，您的代码的简单版本可能如下所示：

var loadImage = function(src, cb) 
    var img = new Image();
    img.src = src;
    img.onload  = function() cb(null, img); ;
    img.onerror = function() cb('IMAGE ERROR', null); ;
;

queue()
    .defer(d3.json, "data/flare.json")
    .defer(d3.csv, "data/test.csv")
    .defer(loadImage, "img/test.png")
    .await( function(error, jsondata, csvdata, imagedata) 
        if (error)  console.log('error', error);  
        else  console.log('success', jsondata, csvdata, imagedata) 
    );

我不确定您想要返回关于图像的什么（如果有的话），但在上面的示例中 cb(null, img) 我将返回整个对象。

【讨论】：

效果很好，谢谢。关于错误处理，我知道我应该像 cd(error, img) 一样添加它，然后如果 error 不为 null，则更改函数行为。但我不知道如何检测图像是否未加载（例如，如果 url 错误）。我知道我可以添加一个img.onerror，但是onload函数似乎没有得到错误值。

@RogerVeciana 查看上述代码的编辑版本，添加了简单的错误处理。