在IE7中，更改圖像時會出現閃爍

Question

我有一個IE7錯誤。 基本上我有一系列按鈕，例如。

<ul>
 <li><a href="javascript:;" onmouseover="change_image(image);"  onmouseout="change_image_back();"onclick="stick_with_image();">1</a>
</li>

 <li><a href="javascript:;" onmouseover="change_image(image);"  onmouseout="change_image_back();"onclick="stick_with_image();">2</a>
</li>

 <li><a href="javascript:;" onmouseover="change_image(image);"  onmouseout="change_image_back();"onclick="stick_with_image();">3</a>
</li>
</ul>

當鼠標懸停在某個按鈕上時，圖像會發生變化，當您轉到下一個圖像時，它會變為該圖像。 當您單擊一個圖像時，它會停留在圖像上，當您從另一個按鈕向外鼠標滑動時，它會向后滑動。 簡單。

但是在IE7中，當從一個元素轉到另一個元素時，它會彈回。 我很確定這可以歸結為“差距”，但html中沒有差距。 我在li和ul元素上嘗試過mouseout / mouseover的組合，但我不確定如何按照我想要的方式完成這項工作。

有任何想法嗎？ 干杯理查德

這是代碼 - 我添加了一些返回來幫助。

    <ul style="float:left;" class="buttonlist">
<li>
<a id="photo_version_control_1" href="javascript:;" 
onmouseover="photo_version_show_after_mouse('/images/gallery/2011/06/lrg/lrg_100597_1297107654.jpg','Another shot of my riverside mandarin;  I just think his colours are so striking.  Thanks to everyone for c/c on Fly Away Peter, really do appreciate the help and advice.  Attempting to upload a V2 showing this little fella in agressive mood to make sure he gets his share of the food on offer.  Hope it appears!  Little late today but it\&#039;s been a busy one.  Going to relax when I get through the next few minutes.  J.','','','',613,862);" 
onmouseout="photo_version_back_to_previous();" 
onclick="photo_version_show_after_click('/images/gallery/2011/06/lrg/lrg_100597_1297107654.jpg');">1</a>
</li>

<li>
<a id="photo_version_control_2" style="margin:0px;" 
href="javascript:;" 
onmouseover="photo_version_show_after_mouse('/images/gallery/2011/06/lrg/lrg_100597_1297108526.jpg','','/photo/mandarin-2-16252498/normal/16252556','','/images/gallery/2011/06/normal/normal_100597_1297108526.jpg',526,802);" 
onmouseout="photo_version_back_to_previous();" 
onclick="photo_version_show_after_click('/images/gallery/2011/06/lrg/lrg_100597_1297108526.jpg');" >2
</a>
</li>
</ul>

一些CSS

ul.buttonlist {
    margin: 0;
    padding: 3px 0;
    height: 26px;
    line-height: 26px;
    border: 1px solid #cacaca;
    float:left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#f0f0f0 url(/site/buttonlist-bg.jpg) repeat-x center center;
}

.buttonlist li{
    display: inline;
    list-style-type: none;
}


.buttonlist a {
    margin:0px;
    height: 26px;
    display: block;
    font-weight:bold;
    padding: 0 8px  0 7px;
    border-left: 1px solid #cacaca;
    float: left;
}

JS

var photo_version_stick = 0;
var current_version;
var current_link;
var current_link_target;
var current_height;
var current_width;
var current_large_image;
var set_large_value;

function photo_version_show_after_mouse(image,description,link,target,large_image,image_height,image_width){
    //alert(document.getElementById('large_version_photo_link').href);
    current_version = document.getElementById("photo_image_display").style.backgroundImage;

    current_html = document.getElementById('photo_description_text').innerHTML;

    if(document.getElementById('photo_view_large_link')!=null) {
        current_link =  document.getElementById('photo_view_large_link').href;
        current_link_target =  document.getElementById('photo_view_large_link').target;

        document.getElementById('photo_view_large_link_image').href = link;
        document.getElementById('photo_view_large_link').href = link;
    }
    else if(document.getElementById('photo_view_normal_link')!=null) {
        current_link =  document.getElementById('photo_view_normal_link').href;
        current_link_target =  document.getElementById('photo_view_normal_link').target;

        document.getElementById('photo_view_large_link_image').href = link;
        document.getElementById('photo_view_normal_link').href = link;
    }

    current_large_image = set_large_value;

    current_height = document.getElementById('main_gallery_image_protector').style.height;

    current_height = parseInt(current_height);
    current_width = document.getElementById('main_gallery_image_protector').style.width;
    current_width = parseInt(current_width);

    document.getElementById("photo_image_display").style.backgroundImage = "url("+image+")";



    document.getElementById('photo_description_text').innerHTML = description;
    document.getElementById('main_gallery_image_protector').style.height = image_height+'px';

    //document.getElementById('main_gallery_image_protector').style.width = image_width+'px';


    if(target==1) {
        target = "_blank";
    }
    else {
        target = "";
    }


    photo_zoom_remove();

    set_large_value = large_image;
    /*if(large_image!='') { 
        ddpowerzoomer.init(jQuery);
        jQuery('#main_gallery_image_protector').addpowerzoom({largeimage:large_image,imagehref:link,imagehreftarget:target});

    }*/

    if(document.getElementById('photo_view_large_link')!=null) {

        document.getElementById('photo_view_large_link_image').target = target;
        document.getElementById('photo_view_large_link').target = target;       
        li_ob = document.getElementById('photo_view_large_link').parentNode;
        if(document.getElementById('photo_view_large_link').href=='javascript:;') {
            li_ob.className = 'disabled'; 
        }
        else {
            li_ob.className = ''; 
        }
    }


    photo_version_stick = 0;




}
function photo_version_back_to_previous(){

    if(photo_version_stick == 0) {



        document.getElementById("photo_image_display").style.backgroundImage = current_version;



        document.getElementById('photo_description_text').innerHTML = current_html;
        if(document.getElementById('photo_view_large_link')!=null) {
            document.getElementById('photo_view_large_link_image').href = current_link;
            document.getElementById('photo_view_large_link_image').target = current_link_target;
            document.getElementById('photo_view_large_link').href = current_link;
            document.getElementById('photo_view_large_link').target = current_link_target;

            li_ob = document.getElementById('photo_view_large_link').parentNode;
        }
        document.getElementById('main_gallery_image_protector').style.height = current_height+'px';
        //document.getElementById('main_gallery_image_protector').style.width = current_width+'px';

        photo_zoom_remove();


        set_large_value = current_large_image;
        //alert(current_large_image+"mouse out");
        /*if(current_large_image!='') {
            ddpowerzoomer.init(jQuery);
            jQuery('#main_gallery_image_protector').addpowerzoom({largeimage:current_large_image,imagehref:current_link,imagehreftarget:current_link_target});
        }*/


        if(document.getElementById('photo_view_large_link')!=null) {
            if(document.getElementById('photo_view_large_link').href=='javascript:;') {
                li_ob.className = 'disabled'; 
            }

            else {
                li_ob.className = ''; 
            }
        }

    }
}

function photo_version_show_after_click(image_source){
    //alert(document.getElementById('large_version_photo_link').href);
    photo_version_stick = 1;

    document.getElementById("photo_image_display").style.backgroundImage = "url("+image_source+")";
    //modification update link
    if(document.getElementById('modification_download_photo')!=null) {
        document.getElementById('modification_download_photo').href=image_source;
    }
}

我希望有所幫助。

Answer 1

我的猜測是你沒有預加載圖像，因此瀏覽器不知道在顯示圖像之前制作結果顯示的大小。 因此閃爍

Answer 2

如果可以，請使用CSS Sprites（取決於圖像當然是什么，因為它並不總是實用）。 這消除了閃爍，因為圖像將被預加載（如JohnO上面提到的）。