Javascript 在Safari中动态加载的模式图形行为异常

下面提供了一个用于在单击时更改图像的脚本，更改将在画布中受到影响

该脚本在Firefox和Chrome中运行正常，但在Safari中运行不正常

原因可能是什么

$function{ var house=document.getElementByIdhouse； var ctxHouse=house.getContext2d； var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var canvas2=document.getElementByIdcanvas2； var ctxHand=canvas2.getContext2d； var FabricLink； var imageObj=新图像； var red=新图像； red.onload=函数{ canvas.width=red.width； canvas.height=red.height； var houseImage=新图像； houseImage.onload=函数{ house.width=house image.width； house.height=house image.height； ctxHouse.drawImagehouseImage，0,0； } houseImage.src=images/img.jpg； ctx.drawImagered，0,0； imageObj.onload=函数{ var pattern=ctx.createPatternimageObj，“重复”； ctx.globalCompositeOperation='source in'； ctx.rect0，0，canvas.width，canvas.height； ctx.fillStyle=图案； ctx.fill； }; $imageObj.attr'src'，'images/'+FabricLink+'.png'； } red.src=images/img.png； var imageObj2=新图像； var blue=新图像； blue.onload=函数{ canvas2.width=blue.width； canvas2.height=blue.height； var houseImage=新图像； houseImage.onload=函数{ house.width=house image.width； house.height=house image.height； ctxHouse.drawImagehouseImage，0,0； } houseImage.src=images/img.jpg； ctxHand.drawImageblue，0,0； imageObj2.onload=函数{ var pattern=ctx.createPatternimageObj2，“重复”； ctxHand.globalCompositeOperation='source in'； ctxHand.rect0，0，canvas2.width，canvas2.height； ctxHand.fillStyle=图案； ctxHand.fill； }; $imageObj2.attr'src'，'images/'+FabricLink+'.png'； } blue.src=images/img.png； $“样式li”。单击 作用{ //我们获取当前文件名并将其用于src var linkIndex=$this.attrdata-filename； $red.attr'src'，'images/'+linkIndex+'.png'； } ; $“袖子里”。单击 作用{ $canvas2.addClassshow-z； //我们获取当前文件名并将其用于src var SleevesLink=$this.attrdata-filename； $blue.attr'src'，'images/'+SleevesLink+'.png'； } ; $'Fabric li'。单击 作用{ //我们获取当前文件名并将其用于src FabricLink=$this.attrdata-filename； $imageObj2.attr'src'，'images/'+FabricLink+'.png'； $imageObj.attr'src'，'images/'+FabricLink+'.png'； } ; $Fabric li:第一个孩子。单击； }; // end$函数{}； 在调试过程中，我们可以看到imageObj.onload并没有在第一次单击时被触发，只是在刷新时，更改在Safari中发生

---

在fiddle中，没有加载图像，但添加了完整的代码

我不确定Safari到底有什么问题，但我可以看到，您试图仅在请求时加载资产，这使一切变得过于复杂，这导致了您设置的回调噩梦

相反，请准备好资产，以便只加载一次。因为您使用的是模式，所以我假设每个模式实际上都是一个小图像。 因此，不要加载每个小模式图像，而是加载一个包含。 从那里，您将能够同步地动态生成画布模式，而无需关心任何加载回调。为了做到这一点，您必须使用第二个屏幕外的画布，作为createPattern方法的源：

//真正的虚拟实现。。。 函数AssetsLoader{} AssetsLoader.prototype=Object.create{ addImage:functionobjs，cb{ if！objs | | typeof objs！=“object”返回； if！Array.isArrayobjs objs=[]； var toLoad=对象长度， imgs=objs.maploadImage，这个； 函数loadImageobj{ if！obj.src返回； 这个.toLoad++； var img=新图像； img.src=obj.src； img.onload=onimgload； img.onerror=onimgerror； 返回obj.img=img； } 函数onimgloadevt{

---

如果-toLoad只是出于好奇，您是否尝试在$window.loadfunction{…}而不是imgObject.onload=function{…}中执行您的操作？结果如何？@Fr0zenFyr尝试过，然后问题也出现在chrome上，safarican没有变化，你可以制作一个演示小提琴或jsbin，我可以检查吗？好的，现在添加@Fr0zenFyr，这里的图像没有加载，但添加了所有代码这是我们需要的，但在我们的要求中，对于t恤，我们需要手袖，需要另一个im年龄，这必须改变，

---

它应该在safari中使用，像8+@aashiqrathnada这样的老版本。这个例子也可以做到这一点，从T恤到沙发，同样的基本建议也适用：一旦你的资产加载并存储起来，你就可以同步使用。感谢你的时间，这个网站在我们的safari中正常工作，而这种类型的更改正是我们所需要的。