0

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

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

https://github.com/scottjehl/picturefill

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

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

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

附言。代码笔被简化到最大。PicruteFill 可能有多个图像作为参数（不同浏览器宽度的不同尺寸等），并且可能有多个部分作为示例工作 - 所以解决方案应该是通用的。

Edit2：正如我所建议的那样，我使用了 imagesLoaded - 它几乎可以工作......除了第一次加载图像时在 firefox 上它不会正确触发。在 Chrome 上一切正常。有什么建议么？

4

2 回答 2

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 位之后指定源。然后，一旦浏览器完成下载图像，它就会运行您需要的功能。

于 2014-03-28T10:37:22.260 回答
1

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

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

于 2014-03-28T10:40:19.447 回答