Javascript 通过.load（）函数对加载的内容运行检查

有一个我似乎无法解决的琐碎问题

我在我正在构建的CMS上有一篇博文，其中一些内容保存在一个具有唯一ID的div中。当用户单击编辑按钮时，将显示一个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();
});

$（文档）.ready（函数（）{
//检查.blogtest div中的每个图像的宽度。如果小于X，则将其设置为全尺寸，如果不是差，则保持正常
函数resize（）{
变量框=$（“.blogtest”）；
box.find（“img.buildimage”）.on（'load'，function（）{
var img=$（此），
宽度=img.width（）；
如果（宽度>=650）{
img.addClass（“buildimage大型”）；
}否则，如果（宽度<500&&width>101）{
img.addClass（“buildimage小型”）；
}
//若图像小于X，则最有可能是一个笑脸
否则，如果（宽度<100）{
img.addClass（“buildimage smiley”）；
}
}).filter（函数（）{
//如果已手动加载映像，则触发事件
返回此文件。完成；
}).触发器（“加载”）；
}
调整大小（）；
});

这将起作用，并检查图像的宽度，并相应地执行操作。在页面完全加载后，图像正确地被赋予了新的类，从而改变了它们的宽度

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

我已经尝试将上述函数添加到AJAX成功返回中，但它没有任何作用

---

有什么想法吗？

如果您试图为已经添加到页面中的图像挂接到

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
  });
}

---

就这么简单！别忘了javascript和PHP不一样！谢谢，我以后会记下来的。