Odd display failure when only one dimension is set in CSS

ckxcore commented 12 years ago

I noticed that half of the time when I load the page, the contents within the #zoom div do not correctly load onto the screen. The issue appears to be that the javascript is loading before the height of the image is known. Whenever the display fails, I notice that az-wrap-inner and az-overly has been given a height of 0.

While I do not know what would cause this to happen, I found that it only happens if you set one dimension of the img tag in CSS and not the other dimension. For instance, I was setting the width but not the height in my CSS document. Once I added height to the CSS, the problem stopped occurring.

Mottie commented 12 years ago

Hi chxcore!

Does the page load the script before the css or after? See what happens when the css is loaded first.

Another method is to make sure all images are loaded before initializing the plugin. This is done by using the window load event instead of the document ready event:

$(window).load(function(){
    $('#zoom').anythingZoomer();
});

If that doesn't work is there a particular browser you're seeing this issue in? Could you share some code or a demo of this issue.

Thanks!

ckxcore commented 12 years ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Anythingzoomer Test Page</title>
<link rel="stylesheet" href="/css/anythingzoomer.css" />
<style>
    #zoom .small img{
        width: 300px;   
    }
    #zoom .large img{
        width: auto;
    }
</style>
</head>

<body>
    <div id="zoom">
        <div class="small">
            <img src="http://2.bp.blogspot.com/-ujddJNQ7hBU/T6LKuxhQsLI/AAAAAAAAFNU/RwdvAUH-D7c/s1600/mountains-wallpaper-6.jpg" />
        </div>
        <div class="large">
            <img src="http://2.bp.blogspot.com/-ujddJNQ7hBU/T6LKuxhQsLI/AAAAAAAAFNU/RwdvAUH-D7c/s1600/mountains-wallpaper-6.jpg" />
        </div>
    </div>

    <script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.anythingzoomer.min.js"></script>
    <script type="text/javascript">
        $("#zoom").anythingZoomer();
    </script>
</body>
</html>

you will notice that it will work sometimes after the page is loaded, and not others. On the times when it doesn't work, you will notice that the height is set to 0 in the style attribute for az-wrap-inner and az-overly. For me it is working about 50% of the time.

However, if you add height to my css, then the code works 100% of the time.

I do not see the problem in any version of Firefox of IE at my disposal. The issue has been noticed on Chrome 19.0.1084.56 m and Safari (Windows) 5.1.7 (7534.57.2).

Mottie commented 12 years ago

AnythingZoomer isn't being initialized inside of a document ready nor a window load function, it should look like this:

<script type="text/javascript">
$(function(){
    $("#zoom").anythingZoomer();
});
</script>

ckxcore commented 12 years ago

Initializing inside of a document ready or window load function doesn't solve this particular issue. A friend of mine brought it to my attention that although the DOM might be ready, images could still be processing, giving the 0 height. If I wish to only set one dimension in CSS (in this case width), then I need to make sure the image is fully loaded before allowing the anythingZoomer to start. Here is a StackOverflow question that gives some insight into the problem: http://stackoverflow.com/questions/1257385/javascript-know-when-an-image-is-fully-loaded

Also, its important to note that I only see this issue in Chrome and Safari.

Mottie commented 12 years ago

Well, you could always try an images loaded script. Check out David Desandro's or my version (which uses a different method). What the script does is update the zoomer once all of the images have completed loading.

Here is a demo, and the script to use:

var zoomer = $('#zoom');

// initialize anythingZoomer
$(window).load(function(){
    zoomer.anythingZoomer();
});

// update after all images have loaded
zoomer.find('img').imagesLoaded(function(){
    // console.debug('all images loaded');
    zoomer.anythingZoomer();
});

Mottie commented 12 years ago

I'm guessing this issue has been resolved. Please feel free to reopen it if you continue to have problems.

CSS-Tricks / AnythingZoomer

Odd display failure when only one dimension is set in CSS #6