Question

我需要通过javascript检查图像的尺寸（图像还没有附加到任何地方的DOM），并且通过图像上的load（）事件来执行此操作。

下面的变量IMAGE包含有效的图片网址。下面的变量SELF包含对插件的THIS的引用。

问题是在load事件中我无法访问我的jQuery插件的变量。从加载事件外部，我无权访问该事件检查的图像尺寸。

给我尺寸但无法访问插件范围

            //Find dimensions of image
            var imageTest = new Image(), iWidth, iHeight;
            // just in case it is not already loaded
            $(imageTest).load(function () {
                iWidth = imageTest.width;
                iHeight = imageTest.height;
                alert(iWidth+' x '+iHeight);
                alert(self.data('overlayTypePreview'));
            });
            imageTest.src = image;

允许我访问插件范围，但不允许访问图像尺寸：

            //Find dimensions of image
            var imageTest = new Image(), iWidth, iHeight;
            // just in case it is not already loaded
            $(imageTest).load(function () {
                iWidth = imageTest.width;
                iHeight = imageTest.height;
            });
            imageTest.src = image;

            alert( self.data('overlayTypePreview') ); // <-- gives me the correct data, string 'mainOverlay'
            alert(iWidth+' x '+iHeight); // <-- gives me 'undefined x undefined'

我也尝试过通过窗口的丑陋的hackish解决方案，但这对我来说也不起作用，也许是因为代码应该在加载事件之前触发警报？

            //Find dimensions of image
            var imageTest = new Image(), iWidth, iHeight;
            // just in case it is not already loaded
            $(imageTest).load(function () {
                window.iWidth = imageTest.width;
                window.iHeight = imageTest.height;
            });
            imageTest.src = image;

            alert(window.iWidth+' x '+window.iHeight);

我想我可以建立一个由3个函数组成的系统，将线程相互传递，但是从load事件中无法调用我的jquery-plugin实例吗？（看到我不知道用户将实例化插件的内容，否则我可能会对实例名称进行硬编码，如果我想要一个更加丑陋的解决方案）。

我想我可以设置某种超时ping：来自插件内部的图像而不是使用load（）事件，但我认为可能有一种更聪明的方式，我还没想到。 ..

Answer 1

这就是我最终解决它的方式。就像我在最初的问题中所说的那样，需要一系列3个功能才能使其清晰：

在我的插件中，为了绘制图像的预览，我进行了这个调用：

self.data('drawPreview')(self,entityId);

drawPreview函数只是将执行反弹到isImageGreaterThanOverlay测试

var drawPreview = function(self,entityId){

    self.data('isImageGreaterThanOverlay')(self,entityId,'drawPreview2')

}
this.data('drawPreview',drawPreview);

如果我只对drawPreview（）函数使用了isImageGreaterThanOverlay（）函数，我可以将上面的drawPreview中的isImageGreaterThanOverlay（）righ的所有内容放在内，但是因为我希望能够使用这个测试器其他类似的功能，我保持这样分开。

如下所示，我的tester函数声明了一个新的Image，然后将一个load事件附加到该图像，然后实际加载图像，这会触发load事件中的匿名函数。

var isImageGreaterThanOverlay = function(self,entityId,destination){
    //Find dimensions of image
    var imageTest = new Image(), iWidth, iHeight;

    $(imageTest).load(function () {
        var iWidth = imageTest.width;
        var iHeight = imageTest.height;

        //find dimensions of overlay
        var myOverlay = self.data('overlayTypePreview');
        oWidth = parseInt( $(self).find(".VanillaGallery-"+myOverlay).css("width").replace('px', '') );
        oHeight = parseInt( $(self).find(".VanillaGallery-"+myOverlay).css("width").replace('px', '') );

        if (iWidth > oWidth || iHeight > oHeight) {
            var isGreater = true;
        }
        else {
            var isGreater = false;
        }

        self.data(destination)(self,entityId,isGreater);

    });

    var entity = self.data('findTheObject')(self,entityId);
    var image = entity['path'];
    imageTest.src = image;

}
this.data('isImageGreaterThanOverlay',isImageGreaterThanOverlay);

这很重要，因为当代码尝试读取图像的尺寸时，以任何其他方式执行此操作会使图像无法在浏览器中完全加载。

在jQuery插件中使用这个工作的关键是包括对jQuery插件的引用，就像他的评论中提到的karl-andré-gagnon一样。通过该引用，您可以访问插件范围的变量和函数。这是我如何将图像与叠加大小（存储在我的插件变量中）进行比较，以及如何将执行从load-event的匿名函数传递回插件中的函数。

另外请确保您没有在load-events匿名函数中传递THIS-reference（在我的情况下为SELF），但是按照我的方式执行，只需将其写入匿名函数。

所以当load-events匿名函数检查大小时，它会将执行传递给我调用drawPreview2的函数（因为它是我初始drawPreview函数的第二部分，记得我不得不拆分它因为异步加载事件）

var drawPreview2 = function(self,entityId,isGreater){

    //using the passed in 'isGreater' variable,
    //I do the stuff I need to display the image correctly

}
this.data('drawPreview2',drawPreview2);

通过Javascript检查图像大小

1 个答案: