Heim Web-Frontend js-Tutorial JQ获取动态加载的图片大小的正确方法分享_jquery

JQ获取动态加载的图片大小的正确方法分享_jquery

May 16, 2016 pm 05:16 PM
动态加载 图片大小

有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.
错误的代码是:
(错误)在添加了HTML之后立即调用代码获取尺寸

复制代码 代码如下:

  var html = '';
  $('#my_div').html(html);
  var width = $('#my_div img').width(); // may return 0

(错误)用jQuery的load()事件处理

复制代码 代码如下:

  var html = '';
  var img = $(html);
  html.load(function(){
  // return 0 if image is loaded from browser cache
  var width = img.width();
  });
  $('#my_div').html(img);

下面这种才是真正正确的方法, 使用JavaScript的Image类:
正确的方法

复制代码 代码如下:

  var html = '';
  $('#my_div').html(html);
  var ni = new Image();
  ni.onload = function(){
  var width = ni.width;
  }
  ni.src = img.attr(URL);
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So passen Sie die Größe von Bildern auf jeder Seite in ppt einheitlich an So passen Sie die Größe von Bildern auf jeder Seite in ppt einheitlich an Jan 07, 2021 pm 03:58 PM

So passen Sie die Größe der Bilder auf jeder Seite von ppt an: 1. Öffnen Sie die ppt-Software, fügen Sie mehrere Bildersätze ein und wählen Sie alle Bilder aus. 2. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie „Größe und Position“. Deaktivieren Sie „Seitenverhältnis sperren“; 4. Klicken Sie auf die Pfeile rechts neben Höhe und Breite und geben Sie die erforderliche Höhe und Breite ein.

Python realisiert das dynamische Laden von Seiten und die asynchrone Anforderungsverarbeitungsfunktionsanalyse einer Headless-Browser-Erfassungsanwendung Python realisiert das dynamische Laden von Seiten und die asynchrone Anforderungsverarbeitungsfunktionsanalyse einer Headless-Browser-Erfassungsanwendung Aug 08, 2023 am 10:16 AM

Python implementiert die dynamischen Lade- und asynchronen Anforderungsverarbeitungsfunktionen von Headless-Browser-Sammelanwendungen. In Webcrawlern ist es manchmal erforderlich, Seiteninhalte zu sammeln, die dynamisches Laden oder asynchrone Anforderungen verwenden. Herkömmliche Crawler-Tools weisen bestimmte Einschränkungen bei der Verarbeitung solcher Seiten auf und können den von JavaScript auf der Seite generierten Inhalt nicht genau abrufen. Die Verwendung eines Headless-Browsers kann dieses Problem lösen. In diesem Artikel wird erläutert, wie Sie mit Python einen Headless-Browser implementieren, um Seiteninhalte mithilfe dynamischen Ladens und asynchroner Anforderungen zu sammeln.

Umgang mit dynamischem Laden und Wechseln von Komponenten in Vue Umgang mit dynamischem Laden und Wechseln von Komponenten in Vue Oct 15, 2023 pm 04:34 PM

Umgang mit dem dynamischen Laden und Wechseln von Komponenten in Vue Vue ist ein beliebtes JavaScript-Framework, das eine Vielzahl flexibler Funktionen zum Umgang mit dem dynamischen Laden und Wechseln von Komponenten bereitstellt. In diesem Artikel besprechen wir einige Methoden zur Handhabung des dynamischen Ladens und Wechselns von Komponenten in Vue und stellen spezifische Codebeispiele bereit. Das dynamische Laden von Komponenten bedeutet das dynamische Laden von Komponenten zur Laufzeit nach Bedarf. Dies verbessert die Leistung und Ladegeschwindigkeit Ihrer Anwendung, da relevante Komponenten nur bei Bedarf geladen werden. Vue bietet Async und AWA

So implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw So implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw Sep 13, 2023 am 08:18 AM

So verwenden Sie die CSSViewport-Einheiten vmin und vw, um die adaptive Bildgröße zu implementieren. Im Webdesign stoßen wir häufig auf Situationen, in denen Bilder an die Bildschirmgröße angepasst werden müssen. Um dieses Ziel zu erreichen, stellt CSS eine leistungsstarke Einheit bereit – die Viewport-Einheit. Dabei repräsentiert vmin den Prozentsatz der kleineren Seite der Breite des Ansichtsfensters und vw den Prozentsatz der Breite des Ansichtsfensters. Daher können wir diese beiden Einheiten verwenden, um den Effekt der adaptiven Bildgröße zu erzielen. Die Einzelheiten werden im Folgenden vorgestellt

Enthüllung des Hot-Update-Prinzips in Golang: Insider-Erklärung zum dynamischen Laden und Neuladen Enthüllung des Hot-Update-Prinzips in Golang: Insider-Erklärung zum dynamischen Laden und Neuladen Jan 20, 2024 am 10:09 AM

Erkundung des Prinzips von Golang Hot Update: Das Geheimnis des dynamischen Ladens und Neuladens Einführung: Im Bereich der Softwareentwicklung hoffen Programmierer oft, Code ändern und aktualisieren zu können, ohne die Anwendung neu starten zu müssen. Solche Anforderungen sind sowohl für die Entwicklungseffizienz als auch für die Zuverlässigkeit des Systembetriebs von großer Bedeutung. Als moderne Programmiersprache bietet Golang Entwicklern viele praktische Mechanismen zur Implementierung von Hot Updates. Dieser Artikel befasst sich mit den Prinzipien des Golang-Hot-Updates, insbesondere mit den Geheimnissen des dynamischen Ladens und Neuladens, und kombiniert ihn mit spezifischen Codebeispielen.

So erstellen Sie eine Tabelle, die Daten mithilfe von Vue und Element-UI dynamisch lädt So erstellen Sie eine Tabelle, die Daten mithilfe von Vue und Element-UI dynamisch lädt Jul 21, 2023 pm 11:49 PM

So erstellen Sie mit Vue und Element-UI eine Tabelle, die Daten dynamisch lädt. In der modernen Webentwicklung sind Datentabellen eine der häufigsten Schnittstellenkomponenten. Vue.js ist heutzutage ein sehr beliebtes Front-End-Framework, und Element-UI ist eine Reihe von Komponentenbibliotheken, die auf Basis von Vue.js entwickelt wurden und uns einen umfangreichen Satz an UI-Komponenten zur Verfügung stellen. In diesem Artikel wird erläutert, wie Sie mit Vue und Element-UI eine Tabelle erstellen, die Daten dynamisch laden kann, und entsprechende Codebeispiele geben. Zuerst müssen wir installieren

Die Bildgröße beträgt 1 m, was der Anzahl der KB entspricht Die Bildgröße beträgt 1 m, was der Anzahl der KB entspricht Aug 29, 2023 pm 04:46 PM

Die Bildgröße 1 m entspricht 1024 KB, da 1 MB 1024 KB entspricht und der Konvertierungsstandard auf binärer Berechnung basiert.

Vue-Fehler beheben: Vue Router kann nicht korrekt verwendet werden, um Komponenten basierend auf Routing-Parametern dynamisch zu laden Vue-Fehler beheben: Vue Router kann nicht korrekt verwendet werden, um Komponenten basierend auf Routing-Parametern dynamisch zu laden Aug 20, 2023 am 08:09 AM

Beheben Sie den Vue-Fehler: VueRouter kann nicht korrekt zum dynamischen Laden von Komponenten basierend auf Routing-Parametern verwendet werden. Bei der Verwendung von VueRouter für Routing-Sprünge müssen wir manchmal Komponenten basierend auf Routing-Parametern dynamisch laden. In einigen Fällen kann jedoch ein häufiger Fehler auftreten: VueRouter kann nicht korrekt verwendet werden, um Komponenten basierend auf Routing-Parametern dynamisch zu laden. In diesem Artikel wird beschrieben, wie Sie diesen Fehler beheben können, und es werden Codebeispiele bereitgestellt. Zunächst müssen wir klarstellen: VueRouter kann bestehen

See all articles