如何通过插件(jquery + picturefill)用javascript加载图片

Question

下面是一个小示例：http://cdpn.io/Gpdyx

它包含一个来自以下位置的PictireFill脚本：

https://github.com/scottjehl/picturefill

以及尝试设置与图像高度相同的.copy元素高度的小jQuery代码。

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

当图像被PictureFill加载并触发resizeAction函数时，我如何才能检测到一个操作，以便一切都像它应该的那样顺利工作？

Ps。最大限度地简化了代码。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的另一种解决方案是实现像ImagesLoaded https://github.com/desandro/imagesloaded这样的jQuery库

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