Filter function does not fire on all items in AppleWebKit

[leomrozek@…]

I have .NET DataList that can show over 50 images at a time and have a one line statement that loads in the page $(document).ready() that is to resize all images on the page with a class of "photo" that are greater that 100px in height to be 100px in height. The statement is:

$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");

The problem is that in any browser that uses the AppleWebKit (Chrome, Safari, iPad) not all the images that are to be resized get resized and it is random (though usually the first 4 or 5 do and the remainder do not). Remarkably, Mozilla (Firefox and Opera) and IE 6/7/8/9 work correctly.

I have put in tracing statements and some of the images that are not being resized initially report as 0px in height. If I put in a 1 second delay using setTimeout() for these browsers, the page loads correctly.

if ($.browser.webkit) {

setTimeout('$(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");', 1000);

} else { This works fine on IE6/7/8/9, Firefox and Opera $(".photo").filter(function (index) { return parseInt($(this).attr("height"), 10) > 100; }).attr("height", "100");

}

As a corporate app, I am stuck right now using 1.4.2 on our production site, but I have done testing on my local machine using 1.4.4 and get the same results.

[jitter]

Try using

$(window).load( resizing function );
$(document).ready( alltheotherstuff );

for compatibility with WebKit browsers on image manipulation. It's known that WebKit fires document.ready but not all image sizes might be available yet.

Please report back if that works for you.

[anonymous]

Tried the change above and it seems to work. One thing I did notice when testing this is that in non-Webkit Browsers (IE, Firefox, Opera), ALL image sizes also may not be available when ready() fires (I have over 50 images on the page that it is checking). It is better than webkit browsers but still not perfect.

As a fix, I am firing the resizing function in the .ready() event to catch the images that do have size available and running again in .load() to catch those that haven't resized yet that need to be resized.

[jitter]

As the suggested solution works for the reporter I'm closing this ticket.