Question

我有一个我创建的函数，最初在窗口加载时运行以对图像进行一些处理（高度宽度等） - 为了这个问题，我将调用该函数“run_imgprocess（）”

我的问题：

使用click函数（或ajax等）向页面附加数据时，我需要在图像加载后调用“run_imgprocess（）”函数，但这是一个棘手的部分。

如果不使用“imagesloaded”插件，我的选择是什么？

我的最后一次尝试是：

$(".appendedclass img").load(function(){
    run_imgprocess();
});

但是，如果您在点击追加中使用多个大图片，则这不可靠。

提前谢谢！

编辑：

添加小提琴 - http://jsfiddle.net/aECag/1/

重要：当您缓存图片时，它们会在重新运行时正确呈现。您必须完全清除浏览器缓存，然后尝试。

Answer 1

如果没有完整的代码，我无法为您测试或设置jsfiddle。也许试试这个：

$('.appendedclass img').each(function() {
    $(this).load(function() {
      run_imgprocess();
    });
 });

Answer 2

您可能想要下拉到js native onload：

$(".hhImageBox:not(.processed) img").each(function(){
    this.onload = function() {
        run_imgprocess();
    }
});

我在你的jsfiddle上尝试过，它看起来效果很好。

原因是jQuery load（）函数更适用于加载HTML，而图像的onload事件在图像完全下载之前不会触发。

Answer 3

我遇到了同样的问题。在我的例子中，我的代码在div中附加了一些包含在Array中的图像。所以基本上图像的数量等于Array.lenght。因此，适用于您的情况可能是：

var imagesLoaded = 0;
$(".appendedclass img").load(function(){
    imagesLoaded++;
    if (imagesLoaded == imagesLinks.length) {
        run_imgprocess();
    }
});

其中imagesLinks是包含我的图像的数组

jQuery检查追加后是否加载了图像

3 个答案: