jQuery检测图像加载

我正在建设一个使用jQuery Mobile的网站，而且我无法正确操作图像。jQuery检测图像加载

首先，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%; 
}

遗憾的是，之前的图像加载高度为0像素，但填充仍显示，所以我只看到丑陋的顶部我的背景部分，直到图像加载掩盖它。

我应该能够隐藏图像，将背景图像设置为none，或者将填充设置为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限制比例。

来源

2011-06-01 Tomas Mulder

我觉得很奇怪，你必须定义图像的高度和宽度，当你正在显示图像时，你是否已经定义了宽度和高度？例如。 '''你试过使用display：none而不是可见性属性吗？ – 2011-06-01 22:00:51

对不起。仍然有这个问题。显示：none也不起作用：就像jQuery无法以任何方式操作图像。并且设置一个百分比高度，即使是硬编码到XHTML中也是行不通的，因为浏览器窗口没有设置百分比的基准高度（它不会添加水平滚动，因此宽度可以工作，但它不会知道垂直停止的位置）。 – 2011-06-14 07:00:36

根据不同的浏览器，$('img') .complete似乎比load()

这里更好的工作是一个脚本，我做了一个沉重的相册：

首先，你要隐藏的容器图像，或以某种方式在它上面放置图层......任何隐藏访问者加载的内容。

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

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

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

然后，做一些功能与setTimeout测试是否imgsLoaded==compteImgs。

来源

2011-06-01 18:11:04 ecchymose

感谢您的信息，但.complete似乎也无法正常工作。看到我编辑的问题。 – 2011-06-01 21:38:35

jQuery检测图像加载

回答

相关问题