确保图像在 Ajax 调用中预加载

Question

我注意到 jQuery Ajax 调用在回调之前不会预加载/加载目标页面的图像。所以基本上它只是加载 html 然后进行回调，在回调之后它开始加载图像/图像。

所以我的问题是，是否有办法确保目标页面图像在附加功能之前也被加载/预加载。

示例代码：

$.ajax({
   url: ''+nextHref+'',
   success: function(data) {

   var $response = $(data);
   var oneval = $response.find('#ContainerWrapper').html();

   // Then some kind of function that preloads the target images before it appends the ajax result. So basically the part below is where I don't know what o do.
   $response.find('#ContainerWrapper img').examplepreloadfunction(function(){

      $("#ContainerWrapper").append(oneval);

   });

   }
});

有任何答案、线索、想法或实验吗？

Answer 1

预加载图像：

$('<img/>')[0].src = '/path/to/image';

或：

(new Image()).src = '/path/to/image';

在将从 AJAX 调用收到的 HTML 注入 DOM 之前，您可以对每个图像进行此操作。