Question

这是一个小样本： http://cdpn.io/Gpdyx

它包含来自：

的PictireFill脚本

https://github.com/scottjehl/picturefill

和小jQuery代码，试图将.copy元素的高度设置为图像高度。

问题是当PictureFill进入游戏时 - 当jQuery触发文档就绪脚本时，显然没有加载图像 - 因此它无法设置正确的.copy高度。但是当你调整浏览器的大小时 - 一切都运行正常，因为图像已经存在。

当PictureFill加载图像并激活我的resizeAction函数时，如何检测到一个动作，以便一切顺利进行？

聚苯乙烯。将codepen简化为最大化。 PicruteFill可能有多个图像作为参数（不同浏览器宽度的不同大小等），并且可能有多个部分作为示例 - 因此解决方案应该是通用的。

EDIT2：正如我所建议的那样，我使用了imagesLoaded - 它几乎可以正常工作......除了在Firefox第一次加载图像时它没有正确激活。在Chrome上一切正常。有什么建议吗？

Answer 1

尝试以下几点：

var imgArray = {pic1url,pic2url...};
var i = 0;
function loadImage(picsrc) {
    var pic = new Image()
    pic.onload = function() {
        if (i >= imgArray.length) {
             your_resize_function();  // finished loading and do resize
        } else {
             loadImage(imgArray[i]); // load next image
        };
        i++;
    };
    pic.src = picsrc;
}

您必须在onload位之后指定源。然后，一旦浏览器下载完图像，它就会运行您需要的功能。

Answer 2

替代Tantedmedialtd的答案是实现一个jQuery库，如ImagesLoaded https://github.com/desandro/imagesloaded

这将在每个/所有/某些图像完成加载时触发事件，并允许转换单个图像以及向外部侦听器发送事件

如何捕获图像加载javascript的插件（jquery + picturefill）

2 个答案: