jquery document.ready图像跨浏览器行为_Jquery_Cross Browser

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

jquery

jquery document.ready图像跨浏览器行为,jquery,cross-browser,Jquery,Cross Browser,因此，首先简要描述模型 <div> <img src="..."> </div> --在不同的浏览器中表现不同 FF正确获取图像的宽度，IE和Opera也是如此。但是Safari说宽度是0px。Chrome在10个页面中的6个页面重新加载时失败。我理解这种行为不是失败的，因为实际上在document.ready（）中只加载DOM，而图像容器的维度仍然为零。但为什么行为会有所不同呢？在这件事上谁是对的因此，我必须仅在加载图像时启动这些操作。但是

因此，首先简要描述模型

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

--在不同的浏览器中表现不同

FF正确获取图像的宽度，IE和Opera也是如此。
但是Safari说

宽度是0px
。Chrome在10个页面中的6个页面重新加载时失败。

我理解这种行为不是失败的，因为实际上在document.ready（）中只加载DOM，而图像容器的维度仍然为零。但为什么行为会有所不同呢？在这件事上谁是对的
因此，我必须仅在加载图像时启动这些操作。

但是，如果我有几个这样的
s，我如何检查所有图像（此类）是否已加载？

或者这里最好的方法就是使用$（窗口）
-fiddle没有显示真正的问题，因为输出页面会在窗口上触发结果。加载。因此，在这里您可以看到主要思想。

我找不到任何免费的主机来放置纯HTML-顺便说一句，有这样简单的服务吗。

所以只是在这里粘贴代码--在这里
<!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>


div{
位置：相对位置；
浮动：左；
边框：1px实心；
}
img{
显示：块；
}

$（文档）.ready（函数（）{
变量Img=$（'Img'）；
$（'p'）.html(
Img[0]。标记名+'：'+
Img.css（'width'）+'*'+
Img.css（‘高度’）
);
$（'div'）.animate（{'left'：parseInt（Img.css（'width'））-200}，2000）；
})
您无法获取尚未加载的图像的宽度。你有两个选择。使用窗口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);
})

在不同的浏览器中反复尝试，您可能会在第一次尝试时看到与后续尝试不同的行为。对于fiddle，您可以通过在正文中将下拉列表从onload更改为nowrap来在fiddle中重新创建它。可能有帮助吗？或者您可以通过javascript加载图像，并使用.load（）事件侦听器。on（'load'
更合适，因为.load（）
是ajax帮助程序，而不是加载事件。对于未缓存的图像，FF看起来也不会返回准确大小的图像；请在那里检查：ctrl+F5以刷新和清除缓存
$(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);
})