javascript - 如何确定 webkit Chrome 和 Safari 浏览器的图像高度和宽度？

Question

伙计们!这是我的第一个问题。我收集了这个小脚本，只需使用一个类即可同时水平和垂直居中元素。来了

(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);

$(document).ready(function() {
$(".vAlign").vAlign();
$(".hAlign").hAlign();
});

我已经使用类“vAlign”或“hAlign”或两者成功地将任何相对于任何容器(具有“position:relative”)的内容居中，除了图像( <img/> )并且仅在 webkit 浏览器上( Chrome 和 Safari)。这意味着，在本例中；

<div class="hAlign vAlign">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique.
</div>

<img class="hAlign vAlign" src="http://rlv.zcache.es/cara_de_lol_etiquetas_redondas-p217382006305499446envb3_400.jpg" alt="lol" />

div 将在任何浏览器上水平和垂直居中，任何其他非“img”标签(甚至“input”或“button”)也是如此。但是，img 不会以 webkit 浏览器为中心。

我到处都找过，但是，要么我没有找到答案，要么我不明白。我对 JS 基本上一无所知，所以如果这是一个愚蠢的问题，请原谅我。

提前致谢!

Answer 1

要测量图像的宽度和高度，您必须确保图像已正确下载。

有两种解决方案:

1. 您可以通过等待窗口加载事件来等待所有文件下载完毕: window.onload vs document.ready jQuery

   $(window).on('load', function(){
     ...
   });
   

2. 有一个“imagesLoaded”插件可以帮助您解决这个问题。它不需要 jQuery，并允许等待单个或多个图像加载: http://desandro.github.io/imagesloaded/

   $.fn.vAlign = function(){
     this.imagesLoad().always(function(){
       ...
     });
     return this;
   };