首页 文章

IE中奇怪的图像对象行为 . 我的解决方案是最好的吗？

提问于
浏览 次
0

我有一个函数接收 either 预加载 JS image object 或 image url . 这是作为 photo 变量传入的 .

我执行检查以查看'photo'var是否为字符串 . 如果是我创建一个新的图像对象并使用onload事件来触发传递新创建的图像对象的generateSlide（）函数，如下所示：

renderSlide: function (slideindex, photo, external, count, text) {
        var self = this;
        var image = new Image();
        if (typeof (photo) == 'string') {
            image.onload = function () {
                self.generateSlide(slideindex, image, external, count, text);
            };
            image.src = photo;
        } else {
            image.src = photo.src;
            self.generateSlide(slideindex, image, external, count, text);
        }
 },

如果'photo'var是预加载的JS图像对象，我只需运行函数本身将图像对象传递给generateSlide（）;

一切都很好但是由于某些原因在IE 9中我不能简单地将'photo'var直接传递给generateSlide（）函数 . 我必须创建一个新的图像对象并设置src以匹配照片对象的src属性 .

这对我没有意义，我不明白为什么会这样？

在photo var是实际的JS图像对象的情况下，它被确认为在其他地方加载 . （我正在预加载资产）;

总之，上面的代码工作正常，但任何人都可以解释 WHY 我必须创建一个新的图像对象，并不能简单传递原始的一个？有更优雅的解决方案吗？到目前为止，我没有注意到上述方法存在任何问题，但是有人意识到使用这种方法存在任何缺陷 .

提前致谢

javascript

1 回答

  • 1

    这听起来像是范围问题 . 您是否尝试将呼叫置于闭包中以确保捕获正确的照片？

    renderSlide: function (slideindex, photo, external, count, text) {
        var self = this;

        if (typeof (photo) == 'string') {
           var image = new Image();
            image.onload = function () {
                self.generateSlide(slideindex, image, external, count, text);
            };
            image.src = photo;
        } else {
          (function(photo){
            self.generateSlide(slideindex, photo, external, count, text);
          })(photo);
        }

    }，

    回复于

相关问题