I have crafted a code snippet that scans through all images within a specified div and assigns classes based on their sizes.
Currently, this functionality is set to run when the document loads, and it works flawlessly upon initial page load.
However, I am developing a content management system where users can edit text directly on the page, triggering an update via ajax.
The response from this call typically resembles:
success: function (response) {
if (response.databaseSuccess) {
$("#container #" +response.postid).load("#container #" +response.postContentID);
$targetForm.find(".saveupdatebutton").qtip("hide");
}
}
After this update, the images within the dynamically loaded div are not resizing as intended.
I've attempted placing the image manipulation code inside the success callback, but it hasn't been successful.
What would be the correct way to execute the code after receiving the response?
Below is the snippet in question:
$(document).ready(function () {
// Iterate through each image in the .blogtest divs to determine their width. If it's greater than X, make it full size; otherwise, keep it normal.
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 the image is less than X, it's likely a smiley
else if (width < 100) {
img.addClass("buildimage-smiley");
}
}).filter(function () {
// Manually trigger the event if the image is already loaded
return this.complete;
}).trigger('load');
});