событие загрузки изображения случайно запускается в IE7 / 8 - PullRequest
Новая
       13

событие загрузки изображения случайно запускается в IE7 / 8

1 голос
/ 14 июня 2011

Ситуация:

Я изменяю размер / предварительно загружаю изображения с помощью javascript перед тем, как показывать их на странице.

Проблема:

ie7 / 8, как правило, вызывают случайное событие загрузкидля некоторых изображений, а не для других (это совершенно случайно и отличается при каждом обновлении)

Код:

JS: 

$(document).ready(function(){
$(".daImg").hide();
$("figure").each(function(){
    $(this).append('<div class="loader"><img src="images/ajax-loader.gif"></div>');
    var afb = $(this).find(".daImg");
    afb.load(function(){
    console.log("loaded");          
    $(this).parent().parent().parent().find(".loader").remove();
    if($(this).parent().parent().parent().is(".last")){
        if(afb.height() > 280){
            var w = (afb.width()/afb.height())*280
            afb.css("width",w);
            afb.css("height","280px");
        }
    } else {
        if(afb.height() > 245){
            var w = (afb.width()/afb.height())*245
            afb.css("width",w);
            afb.css("height","245");
        }
    }
    afb.css("left","50%");
    afb.css("margin-left","-"+afb.width()/2+"px");
    afb.fadeIn();
    })
});
}

HTML 

 <figure class="left">                      
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>


<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>


<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>


<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>


<figure class="left">                       
<a href="foobar.html">
    <div class="imageWrap">
        <img class="daImg"  src="foo-bar.png" alt="foobar" />
    </div>
    <figcaption class="cufonize"><span class="decorated">foobar</span><br> 
        <span class="price">99</span>
    </figcaption>
</a>

Если кто-нибудь может пролить немногосвет, что здесь происходит, я буду признателен!

Примечание. Эта проблема не имеет ничего общего с кэшированием, поскольку я добавляю метки времени ко всем изображениям в моем фактическом коде.

1 Ответ

1 голос
/ 14 июня 2011

вы можете попробовать другой подход в вашем случае

использовать css 

.daImg {
   display:none;
}

, затем подключить ваш скрипт изменения размера изображения к $ (window) .load ();и манипулировать всеми изображениями: не (: видимыми) одновременно

, вы также можете дублировать это для остальных браузеров на событие img.load, но для изображений, которые еще не видны.я имею в виду, что ваш селектор будет var afb = $(this).find(".daImg:not(:visible)");

в этом случае IE все изображения, которые не были обработаны другим событием, будут обработаны там

...