Question

当隐藏div（display:none）时，浏览器将不会加载其中的图像。 有没有办法告诉浏览器加载图片？我需要图片的高度和宽度进行一些预处理。

注意：由于其他一些代码，我无法使div可见。 Check the example here。另外，“懒惰负载”示例对我不起作用。

Answer 1

使div可见，但使用position: absolute;将其放在页面外。

如果您的“其他代码”也不允许您这样做，请创建一个具有相同URL的新图像节点，将其放置在页面外部，等待它加载，读取其高度并销毁。

Answer 2

我已经添加了一些预加载，将它包装到一个函数中，并且可以解决这个问题：

function getImageDimension(el, onReady) {    
    var src = typeof el.attr === 'function' ? el.attr('src') : el.src !== undefined ? el.src : el;

    var image = new Image();
    image.onload = function(){
        if(typeof(onReady) == 'function') {
            onReady({
                width: image.width,
                height: image.height
            });
        }
    };
    image.src = src;
}

可以用作：

getImageDimension($('#img1'), function(d){ alert(d.height); });
var url = 'http://urology.jhu.edu/patrickwalsh/photo1.jpg';
getImageDimension(url, function(d){ alert(d.height); });

Answer 3

您可以尝试使用jquery预加载图像 - 请查看此SO答案：

Preloading images with jQuery

这应该在您决定显示之前预先加载它们。

Answer 4

查看此主题。

Don't load hidden images

Answer 5

我相信这只适用于父级为“display：none”的项目

请参阅有关此问题的文章http://dev.jquery.com/ticket/125

另外，请参阅此示例（另存为.html文件）

<html>
<head>
<title>Example</title>



<script type="text/javascript">
    $(document).ready(function(){
        alert($("#target").height());
    });
</script>
</head>

<body>
  <div id="parent" style="display:none;">
    <div id="target" style="height:100px;display:block;">
        a
    </div>
</div>
</body>
</html>

如何获得隐藏图像的高度？

5 个答案: