i have a snippet i created which checks all of the images inside a div and adds a class dependant on their size.
I have this currently on document ready and i works perfectly fine when the page is loaded.
However, im making a CMS where you can edit text on the page itself and then it updates via ajax.
The call response normally looks like:
success: function (response) {
if (response.databaseSuccess) {
$("#container #" +response.postid).load("#container #" +response.postContentID);
$targetForm.find(".saveupdatebutton").qtip("hide");
}
}
After this, the images inside the div that is loaded via the .load() function are not resized.
I have tried putting the code i use in that success response but no luck.
How should i be calling the code after the response?
Heres the code:
$(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
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');
});
Depending on which version of jQuery you are using, you might be able to just change .on
to .live
like this:
box.find("img.buildimage").live('load', function () {
If that does NOT work, then you can try below. Then you'd have to do it the "right" way below:
First externalize your function for the image resizing:
$(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
var box = $(".blogtest");
box.find("img.buildimage").on('load', imageOnload)
.filter(function () {
//if the image is already loaded manually trigger the event
return this.complete;
})
.trigger('load');
});
function imageOnload(evt){
var img = $(evt.currentTarget),
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");
}
}
Then, you can just add this statment in your success callback:
$("#container #" +response.postid).on("load", imageOnload);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.