Question

因此，首先简要描述一下模型。

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

说，我们有几个<div>块，每个块包含一些具有可变尺寸的图像并且假设在页面加载之后，我们需要对那些<div>进行一些操作例如，将它们移动到右侧，宽度减去200px 或其他任何需要这些维度的值。

主要想法是将图像width然后.animate() left div属性获取所需的值。但代码如 -

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

- 在各种浏览器中表现不同。

FF正确获取图像的宽度，IE和Opera也是如此但Safari称width为0px。 Chrome在10页重新加载中的大约6次失败。

我理解这种行为不是失败，因为实际上在document.ready（）中只加载了DOM，而图像容器的维度仍然等于零。 但为什么行为不同呢？在这种情况下谁是对的？

因此，我必须仅在加载图像时触发这些操作但是，如果我有几个这样的<div>，我如何检查所有图像（此类图像）是否已加载？
或者最好的方法是使用$(window).load？

http://jsfiddle.net/nqmc9/2/light/ - 小提琴并没有显示真正的问题，因为输出页面会在window.load上触发结果。所以在这里你可以看到主要的想法我找不到任何免费托管来放置纯HTML - 顺便说一句，是否有这样简单的服务。
所以只需在这里粘贴代码 - http://pastebin.com/raw.php?i=uMhXkDMB - 这里......

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

Answer 1

您无法获得尚未加载的图像的宽度。你有两个选择。使用窗口onload事件，或在每个单独的图像上使用onload事件。

$(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);
})

jquery document.ready与图像的跨浏览器行为

1 个答案: