jquery document.ready cross-browser behavior with images

StackOverflow https://stackoverflow.com/questions/23478478

  •  15-07-2023
  •  | 
  •  

문제


So, briefly describing the model first.

<div>
    <img src="...">
</div>

Say, we have few <div> blocks, each containing some image with variable dimensions.
And suppose, after the page loads, we need to make some operations with those <div>s.
For example, move them to the right by their own width minus 200px.
Or anything else, that needs the values of those dimensions.

The main idea is to get the image width and then .animate() the left property of a div by a required value. But the code like --

$(document).ready(function(){
var Img = $('img');
$('div').animate({'left': parseInt(Img.css('width'))-200}, 2000);
})

-- behaves differently in various browsers.

FF gets the width of an image correctly, also IE and Opera do.
But Safari says the width is 0px. Chrome fails at about 6 of 10 page reloads.

I understand that this behavior is not a failure, because actually at document.ready() only DOM is loaded, while image container still has dimensions equal to zero. But why the behavior differs then? And who is right in this case?

So, I have to fire those operations only when image is loaded.
But if I have several such <div>s, how can I check that all images (of this kind) has been loaded?
Or the best way here is just to use $(window).load?

http://jsfiddle.net/nqmc9/2/light/ - fiddle doesn't show the real problem, because output page fires the result on window.load. So here you can just see the main idea.
I could not find any free hosting to put there plain HTML - btw, are there such simple services.
So just pasting code here - http://pastebin.com/raw.php?i=uMhXkDMB - and here...

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <style type="text/css">
            div {
                position: relative;
                float: left;
                border: 1px solid;
            }
            img {
                display: block;
            }
        </style>
    </head>

    <body>
        <p></p>
        <div>
            <img src="http://fb.ru/misc/i/gallery/10881/25071.jpg"/>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                var Img = $('img');
                $('p').html(
                    Img[0].tagName+ ': ' + 
                    Img.css('width')+' * '+
                    Img.css('height')
                );
                $('div').animate({'left': parseInt(Img.css('width'))-200}, 2000);
            })
        </script>
    </body>
</html>
도움이 되었습니까?

해결책

You cannot get the width of an image that is not loaded yet. You have two options. Use the window onload event, or use an onload event on each individual image. 

$(window).on('load',function(){
    var Img = $('img');
    $('p').html(
        Img[0].tagName+ ': ' + 
        Img.css('width')+' * '+
        Img.css('height')
    );
    $('div').animate({'left': parseInt(Img.css('width'))-200}, 2000);
})
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top