Javascript 在IE7中，更改图像时会出现闪烁

我有一个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>

JS

---

我希望这会有所帮助。

我的猜测是，您没有预加载图像，因此在交付图像之前，浏览器不知道结果显示的大小。因此闪烁

我的猜测是，您没有预加载图像，因此在图像交付之前，浏览器不知道结果显示的大小。因此，如果可以的话，flicker

使用CSS精灵（当然取决于图像是什么，因为它并不总是实用的）。这消除了图像预加载时的闪烁（如JohnO所述）。

如果可以的话，使用CSS精灵（当然取决于图像是什么，因为它并不总是实用）。这将消除图像预加载时的闪烁（如JohnO所述）。

这将有助于查看

change\u image（）

、

change\u image\u back（）

和

stick\u with\u image（）

中涉及的代码。这将有助于查看

change\u image（）

、

change\u image\u back（）中涉及的代码

和

粘贴图像（）

。不，问题是它会弹回到上一个图像。是的，这不是加载问题。谢谢，但问题是它会弹回到上一张图片。是的，这不是加载问题。谢谢，是的，这是个好主意，但是这些照片太大了，所以都是动态的，只是不实用。对于较小的图像，这是个好主意。Ta Richardy是的，这是个好主意，但是这些照片太大了，所以都是动态的，只是不实用。对于较小的图像，这是个好主意。塔理查德

    <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>

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;
}

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;
    }
}