Question

有这个琐碎的问题，我似乎无法弄明白。

我正在建立的CMS上有一篇博文，并且有一些内容保存到div中，并且有自己唯一的ID。当用户单击编辑按钮时，将显示CKeditor（包含与div相同的文本）。我还显示一个保存按钮，单击该按钮，通过AJAX调用处理PHP脚本。

在数据库更新成功后，我在我的AJAX调用中使用它：

if (response.databaseSuccess) {
  $("#container #" +response.postid).load("#container #" +response.postContentID);
}

这完美无缺，并将更新后的内容加载到div中。

现在问题......

在页面加载时，我使用：

$(document).ready(function () {
    // check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
    function resize() {
    var box = $(".blogtest");
    box.find("img.buildimage").on('load', function () {
        var img = $(this),
            width = img.width();
        if (width >= 650) {
            img.addClass("buildimage-large");
        } else if (width < 500 && width > 101) {
            img.addClass("buildimage-small");
        }
        // if image is less than X, its most likely a smiley
        else if (width < 100) {
            img.addClass("buildimage-smiley");
        }
        }).filter(function () {
            //if the image is already loaded manually trigger the event
            return this.complete;
        }).trigger('load');
    }
    resize();
});

这样做，并检查图像的宽度并采取相应的行动。页面完全加载后，图像正确地获得了他们的新类，它改变了它们的宽度。

问题是我无法使用此功能处理保存的数据。因此，当我单击“保存”并通过.load（）加载内容时，不会检查新图像。

我已尝试将上述功能添加到AJAX成功返回中，但它没有做任何事情。

有什么想法吗？

Answer 1

如果您尝试为已添加到页面的图片挂钩onload事件，则很容易错过onload事件，特别是如果图像已经在浏览器缓存（因此会快速加载），因为在您有机会附加事件处理程序之前，onload事件可能已经被触发。通常的解决方法是执行类似这样的操作，在附加onload处理程序之前检查它是否已经加载：

box.find("img.buildimage").each(function() {
    if (this.complete) {
        // image already loaded so just process it here
    } else {
        // image not yet loaded so attach an onload handler
        $(this).on("load", function() {
            // now the image is loaded so process it here
        });
    } 
});

我不确定您用于动态加载新内容的代码到底是什么。如果您使用Ajax进行此操作，则需要确保在将内容添加到页面（您正在使用的任何加载操作的成功或完成处理程序）之前，不要触发上述代码。

因此，如果您正在加载新内容：

if (response.databaseSuccess) {
  $("#container #" +response.postid).load("#container #" +response.postContentID);
}

然后，您将在.load()函数上使用完成处理程序回调来触发上述代码：

if (response.databaseSuccess) {
  $("#container #" +response.postid).load("#container #" +response.postContentID, function() {
      // code here that looks at the dynamically loaded content
  });
}

运行通过.load（）函数加载的内容

1 个答案: