javascript - HTML/jQuery onload/load 在 iOS 上未执行

Question

我正在尝试在 iPhone/iPad 上显示 SVG。此代码在 ASP.Net 页面中运行。我使用 Raphael 来显示图形以及 Raphael 处理的所有其他爵士乐。但是，我的代码实际上并未在 iOS 上执行。

 img = new Image();

 //img.onload = function () { drawLayersWhenAllAreLoaded(); };
 if (img.addEventListener) {
     img.addEventListener('load', drawLayersWhenAllAreLoaded, false);
 }
 else {
     img.attachEvent("onload", function () { return (drawLayersWhenAllAreLoaded.call(img, window.event)); });
 }

 img.src = files[i];

我已经在 Windows 上的 Chrome、Firefox 和 Safari 中对此进行了测试，效果非常好。我已经在 Mac OS X 上的 Chrome、Firefox 和 Safari 中对此进行了测试，效果非常好。但是，当在 iOS 上运行时(无论 iOS 6 或 iOS 7，无论 iPhone 还是 iPad)，drawLayersWhenAllAreLoaded 函数不会被执行。如果不执行，图像不会显示在屏幕上。

这是我测试的最终代码。我测试过不检查iOS。我仅使用 img.onload 进行了测试。我尝试过仅使用 img.addEventListener。如果尝试了从最简单到最复杂的每个版本的代码，我根本无法让它工作。如果我在drawLayersWhenAllAreLoaded中放置一个警报，它会显示在上面的所有浏览器上，但不会显示在iOS上。

根据我的理解，在 HTML/jQuery 中设置图像的 src 将加载图像。我们的图像可能相当大，因此我需要等待它们全部加载，然后再调用drawLayersWhenAllAreLoaded(此代码在加载一堆图像的循环中)。

我在 Google 上搜索了几个小时寻找类似的内容，但一无所获。想知道是否有人再次遇到此问题，或者看看我做错了什么？

谢谢。

已编辑:

经过更多测试，我确定我的 drawLayersWhenAllAreLoaded 确实被命中，但仅一次。我目前正在尝试加载 32 张图像。加载图像的代码在 iOS 上运行了 32 次(每次都会添加警报显示)，但 drawLayersWhenAllAreLoaded 仅调用一次。

Answer 1

所以我最终能够执行 load 方法。我将代码切换为使用 imagesLoaded( http://desandro.github.io/imagesloaded/ )，但这仍然没有解决我的问题。看来在 Mobile Safari 中，它不会加载未添加到 DOM 的对象。将动态生成的图像添加到 div 后，它就开始工作了。我不确定这是否是 Apple 出于内存目的而设计的，或者只是一个问题。

我想发布此内容是为了帮助其他可能遇到此问题的人。

var $img = $('<img>').attr('src', files[i])
              .css({
                 "position":"absolute",
                 "top":"0px",
                 "left":"0px",)
             .prependTo(".canvas").imagesLoaded(function () {
                    drawLayersWhenAllAreLoaded();
});