how to get a js png fix to work on ajax calls

Question

we're using js to do png replacement, and we also have ajax updates on some of these elements. when the page fragment gets updated, the png fix gets lost, since the png fix traverses the dom and replaces png bg images when the document loads. is there a way to render the png replacement when the ajax update takes place, rather than only on document.onload? we're using jquery.

Answer 1

Are you using behavior?

If you are using iepngfix.htc, you might try setting the behavior inline

var myEl = document.getElementById('inbound-ajax-element');
myEl.style.behavior = 'url(iepngfix.htc)';

http://www.twinhelix.com/css/iepngfix/demo/

Answer 2

http://abcoder.com/javascript/ie6-png-alpha-transparency-fix-for-dynamically-loaded-images-via-ajax/

The link above provides an example that attaches the PNG fix to the image's onload event, for example:

    new_img.onload = function(){
    ti.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + timg_src + "', sizingMethod='scale')";
    ti.setAttribute('src', 'blank.gif');}

Answer 3

You should take a look here jQuery IE PNG Fix Plugin

jQuery(function($) {
    $("img[@src$=png], #image-one, #image-two").pngfix();
});

You should run this on the images you just loaded.

Answer 4

The reason it gets lost is that the pngfix is not something that is applied continually, it is applied on page load to the items present, and so if you change one of them or create new png's the pngfix will not be applied.

So in your javascript where you create the image, you need to follow it up by applying the pngfix to that item.

How that javascript will look is dependent on what kind of pngfix you're using. There are other answers here which give examples of what to apply after you add the new image.