предзагрузчик с jquery

Question

Я пытаюсь сделать предварительный загрузчик с помощью jquery. Может кто-нибудь сказать, пожалуйста, как рано мы можем получить ширину и высоту изображения, чтобы я мог поместить preloader.gif в середину фактического изображения с абсолютным позиционированием?

Другими словами, я хочу вызвать функцию, как только будут установлены ширина и высота изображения. Как это сделать? Возможно ли это?

Answer 1

---

Демо

_{* в этом примере изображение как-то запуталось ... извините}

---

var img = new Image();
img.src = "http://th06.deviantart.net/fs71/PRE/f/2010/263/0/d/random_manga_oc_2_by_alcuinus-d2z45x0.png";
img.onload = function(){
    this.style.marginLeft = (-this.width / 2) + "px";
    this.style.marginTop = (-this.height / 2) + "px";
    alert("This image's dimensions are " + this.width + " by " + this.height);
}

Это приведет вас туда. Основной концепцией является создание объекта изображения js (если изображение уже загружено в разметку, оно будет загружено из кэша), а при его загрузке присвойте значения полей версии HTML на основе измерений версии, загруженной js.

Answer 2

Это должно произойти, как только запрос изображения возвращается в браузер. Однако, если вы знаете точную ширину и высоту вашего изображения, вы должны установить их с помощью атрибутов height= и width= в HTML или свойств width: и height: CSS. это позволит браузеру точно знать размеры до того, как он запросит изображения.