Question

Can someone help me with this? I have a menu-slider and everytime you hover on a list-item a new image shows up, the problem is: Everytime a new image shows up it loads up, and after that it follows my code, so, the image shows up, and then it hides, and then it fades in but I want the image to get hidden before it even shows up.

My code:

<script type="text/javascript">
$('#image_div').prepend(
    $('<img/>',{ }).load(
        function(){
            $(this).hide().delay(500).fadeIn(1000);
            $('#image_div img:first').next().animate({},0,function(){
                $(this).remove();
            });
        }
    ).attr('src',''+info_elem.find('.info_image').html())
);
</script>

Answer 1

Without having a look at your HTML/CSS, I’d say the easiest solution is to set the image element with a CSS class that has display:none per default.

In JS

$('<img class="hidden" />',{}).load(...)

In CSS

.hidden {
    display:none;
}