Хорошо, я практически новичок в html / js, но я думаю, что мне пришлось немного изменить ответ Роба Аллена, чтобы решить две проблемы:
- AlphaImageLoader () изменял соотношение сторон моих изображений, поэтому мне нужно было восстановить исходные размеры ПОСЛЕ изображения были загружены.
- fixPngs (), если вызывается с конца html, вызывается после загрузки документа, но до загрузки всех изображений.
Итак, я изменил свой fixPngs (), чтобы просто прикрепить событие:
function fixPngs() {
// Loops through all img tags
for(i = 0; i < document.images.length; i++) {
var u = document.images[i].src;
var o = document.images[i];
if(u.indexOf('.png') > 0) {
o.attachEvent('onload', fixPng);
o.src = u;
}
}
}
fixPngs () по-прежнему вызывается с конца html:
<!--[if lte IE 6]>
<script language="javascript" type="text/javascript">
// Do this after the page loads
fixPngs();
</script>
<![endif]-->
И fixPng () теперь выбирает вызывающего, отсоединяет событие, сохраняет исходные измерения, вызывает AlphaImageLoader () и, наконец, восстанавливает измерения:
// u = url of the image
// o = image object
function fixPng(e) {
var caller = e.target ||
e.srcElement ||
window.event.target ||
window.event.srcElement;
var u = caller.src;
var o = caller;
if(!o || !u)
return;
// Detach event so is not triggered by the AlphaImageLoader
o.detachEvent('onload', fixPng);
// Save original sizes
var oldw = o.clientWidth;
var oldh = o.clientHeight;
// Need to give it an image so we don't get the red x
o.src = 'images/spacer.gif';
o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";
// Restore original sizes
if(o.style) {
o.style.width = oldw +"px";
o.style.height = oldh +"px";
}
}
Я перебил это?