Question

我正在使用jQuery Mobile构建一个网站，但我无法正确操作图像。

首先，here's the address。有问题的图像出现在任何网站和图形链接上。

在我的CSS中，我将图像扩展到屏幕大小：

img.size{
    width: 95%;
    padding: 1.5% 1.8% 3% 2.3%;
    background-image: url("../images/content/img-bg.png");
    background-size: 100%;
}

不幸的是，在图像加载之前，高度是0px，但填充仍然显示，所以我只看到背景的丑陋顶部，直到图像加载覆盖它。

我应该能够隐藏图像，将背景图像设置为无，或者将填充设置为0px直到图像加载，然后使用jQuery更改它，但是（我认为因为图像是通过Ajax加载的整页已加载）jQuery没有看到图像已加载。例如，这将隐藏所有图像，因此正在检测图像：

$('img').css('visibility', 'hidden');

但这不起作用，即使我删除上面的代码行并让CSS通过defualt隐藏图像

所以在CSS中：

img{
    visibility: hidden;
}

并在代码中：

$('img').load(function() {
    $('img').css('visibility', 'visible');
});

或

$('img').complete(function() {
    $('img').css('visibility', 'visible');
});

关于如何让jQuery真正检测我的图像是否已加载的任何想法？即使是纯粹的CSS解决方案也没关系，但我仍然想知道jQuery的问题是什么。

感谢。

P.S。我可以在px或em中添加CSS高度，但

height: 95%;

不起作用。我意识到百分比高度通常不起作用，但由于图像宽度随屏幕而变化，因此高度也需要，因此设置无高度会强制CSS限制比例。

Answer 1

根据浏览器的不同，$('img')。完成似乎比load()

效果更好

这是我为重型照片库所做的剧本：

首先，你必须隐藏图片的容器，或者以某种方式在它上面添加一层......任何隐藏访问者加载的内容。

countImgs = $("#container > img").size();
imgsLoaded = 0;

$("#container > img").each( function() {

        if(this.complete) {
            imgsLoaded++;
        } else {
            $(this).load( function() {
                imgsLoaded++;
            });
        }
});

然后，使用setTimeout执行某项功能，以测试imgsLoaded==compteImgs。

jQuery检测图像加载

1 个答案: