javascript - Wie erreicht man das in Taobao oder JD.com? Die Originalgröße der Bilder in der Bilderliste ist gleich.-PHP-Tutorial-php.cn

Heim

Backend-Entwicklung

PHP-Tutorial

javascript - Wie erreicht man das in Taobao oder JD.com? Die Originalgröße der Bilder in der Bilderliste ist gleich.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 11, 2016 pm 02:23 PM

html5javajavascriptnode.jsphp

Ich habe kürzlich eine Produktlistenseite erstellt. Nachdem ich online gegangen war, stellte sich heraus, dass es sich um eine Bildverformung handelte Das Verhältnis des im Hintergrund hochgeladenen Bildes unterschied sich von dem durch mein eigenes CSS gesteuerten Bildgrößenverhältnis.
Also habe ich mir E-Commerce-Websites wie Taobao und JD.com angesehen und festgestellt, dass die Bildgrößen alle die gleiche Größe oder Proportion haben javascript - Wie erreicht man das in Taobao oder JD.com? Die Originalgröße der Bilder in der Bilderliste ist gleich.

javascript - Wie erreicht man das in Taobao oder JD.com? Die Originalgröße der Bilder in der Bilderliste ist gleich.
Geht dies beim Hochladen von Bildern über den Hintergrund nach einheitlichen Spezifikationen oder gibt es beim Hochladen von Bildern im Hintergrund keine Größenbeschränkung und kann nach Belieben hochgeladen und per Code verarbeitet werden?

Antwortinhalt:

Beim Hochladen von Produkten müssen Sie nur ein hochauflösendes Originalbild hochladen, und der Server löst dieses Problem durch Komprimierungstechnologie.

Der Server speichert mehrere Sätze von Bildern unterschiedlicher Größe
Fügen Sie beim Anfordern des img-Tags eine Kennung zur Adresse hinzu, und der Server komprimiert das Bild in Echtzeit

Beide dieser beiden Methoden können implementiert werden. Im letzteren Fall werden mehrere Anforderungen mehrfach komprimiert. Die erste Methode besteht darin, den Verbrauch der Festplatte zu erhöhen. Die beiden Optionen 2 haben Eigenschaften und können je nach Ihrer tatsächlichen Situation ausgewählt werden.
Einige Optimierungsmethoden können später hinzugefügt werden, z. B. Caching.

<code><img  src="/static/imghwm/default1.png" data-src="//img12.360buyimg.com/n1/s130x130_jfs/t3163/260/532931768/76885/977fb56c/57b9d838Nda11d3bb.jpg" class="lazy" data-lazy-img="done"    style="max-width:90%"  style="max-width:90%" title="【京东超市】蒙牛 纯甄 常温酸牛奶 200g*12 礼盒装" alt="javascript - Wie erreicht man das in Taobao oder JD.com? Die Originalgröße der Bilder in der Bilderliste ist gleich." ></code>

Der Tag oben ist die Bildgröße in der Adressleiste des Produktbildes auf der JD.com-Homepage. s130x130 ist der Bildgrößenindikator.

Im Hintergrund hochgeladen, wird Taobao auch im Hintergrund hochgeladen

Dies kann nicht vollständig per Programm bewältigt werden und es müssen entsprechende Anforderungen an die Betreiber gestellt werden.

Der Versuch, sich bei der Bewältigung aller Probleme auf Programme zu verlassen, ist dasselbe wie der Versuch, einen vollständig ausgeschalteten Computer dazu zu bringen, seine eigene Stromquelle zu finden und hochzufahren.

Sie müssen zuerst den Taobao-Hintergrundbild-Upload-Prozess ausprobieren, der tatsächlich ein Upload-Plug-in zum Zuschneiden und Komprimieren aller Bilder verwendet, und es wird automatisch konvertiert Proportionsformat auf Taobao.

Für Ihre Frage schlage ich vor, dass Sie ein besseres Plug-in zum Hochladen von Bildern finden, den Anteil beim Hochladen von Bildern steuern und die Bildqualität an der Quelle steuern.
Optimieren Sie gleichzeitig den Upload-Vorgang und geben Sie Tipps. Verwenden Sie auffällige Eingabeaufforderungen, um Benutzer über bestimmte Anforderungen zu informieren.

Ich empfehle ein kostenloses Plug-in zum Hochladen und Zuschneiden von Bildern: http://www.w3cschool.cn/jquer...
Ein ähnliches Plug-in zum Hochladen ist besser geeignet. Wenn Sie stapelweise hochladen, finden Sie natürlich ein Skript zum Abfangen von Bildern, um das Abfangen von Stapeln zu implementieren.
Ich persönlich schlage jedoch vor, dass es für Bilder, die dem E-Commerce ähneln, angemessener wäre, das Größenverhältnis in der Bildverarbeitungsphase von Tools wie PS zu verarbeiten. Sie können uns die Anforderungen an das Bildverhältnis für Ihre Website senden. Es wird außerdem empfohlen, dass Ihr Bildverhältnis so nah wie möglich am Verhältnis großer Plattformen wie Taobao liegt. Dies erleichtert auch die Wiederverwendung von Kundenmaterialbildern und verbessert das Benutzererlebnis .

Stellungnahme

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

Verwandter Artikel

Wie funktioniert der Php -Typ -Hinweis, einschließlich Skalartypen, Rückgabetypen, Gewerkschaftstypen und nullbaren Typen?Apr 17, 2025 am 12:25 AM

PHP -Typ -Eingabeaufforderungen zur Verbesserung der Codequalität und der Lesbarkeit. 1) Tipps zum Skalartyp: Da Php7.0 in den Funktionsparametern wie int, float usw. angegeben werden dürfen. 3) Eingabeaufforderung für Gewerkschaftstyp: Da Php8.0 in Funktionsparametern oder Rückgabetypen angegeben werden dürfen. 4) Nullierstyp Eingabeaufforderung: Ermöglicht die Einbeziehung von Nullwerten und Handlungsfunktionen, die Nullwerte zurückgeben können.

Wie handelt es sich bei PHP -Objektklonen (Klonschlüsselwort) und der __clone Magic -Methode?Apr 17, 2025 am 12:24 AM

Verwenden Sie in PHP das Klonschlüsselwort, um eine Kopie des Objekts zu erstellen und das Klonierungsverhalten über die \ _ \ _ Clone Magic -Methode anzupassen. 1. Verwenden Sie das Klonschlüsselwort, um eine flache Kopie zu erstellen und die Eigenschaften des Objekts, nicht die Eigenschaften des Objekts zu klonen. 2. Die \ _ \ _ Klonmethode kann verschachtelte Objekte tief kopieren, um flache Kopierprobleme zu vermeiden. 3. achten Sie darauf, dass kreisförmige Referenzen und Leistungsprobleme beim Klonen vermieden werden, und optimieren Sie die Klonierungsvorgänge, um die Effizienz zu verbessern.

PHP vs. Python: Anwendungsfälle und AnwendungenApr 17, 2025 am 12:23 AM

PHP eignet sich für Webentwicklungs- und Content -Management -Systeme, und Python eignet sich für Datenwissenschafts-, maschinelles Lernen- und Automatisierungsskripte. 1.PHP hat eine gute Leistung beim Erstellen von schnellen und skalierbaren Websites und Anwendungen und wird üblicherweise in CMS wie WordPress verwendet. 2. Python hat sich in den Bereichen Datenwissenschaft und maschinelles Lernen mit reichen Bibliotheken wie Numpy und TensorFlow übertrifft.

Beschreiben Sie verschiedene HTTP-Caching-Header (z. B. Cache-Control, ETAG, Last-modifiziert).Apr 17, 2025 am 12:22 AM

Zu den wichtigsten Spielern in HTTP-Cache-Headern gehören Cache-Control, ETAG und Last-modifiziert. 1.Cache-Control wird verwendet, um die Richtlinien zu kontrollieren. Beispiel: Cache-Control: max-ay = 3600, öffentlich. 2. ETAG überprüft Ressourcenänderungen durch eindeutige Identifikatoren, Beispiel: ETAG: "686897696A7C876B7E". 3. Last-modifiziert gibt die letzte Änderungszeit der Ressource an, Beispiel: Last-Modified: Mi, 21okt201507: 28: 00GMT.

Erklären Sie sicheres Kennwort -Hashing in PHP (z. B. password_hash, password_verify). Warum nicht MD5 oder SHA1 verwenden?Apr 17, 2025 am 12:06 AM

In PHP sollten die Funktionen für Passwort_Hash und passwart_verify verwendet werden, um sicheres Passwort -Hashing zu implementieren, und MD5 oder SHA1 sollte nicht verwendet werden. 1) Passwort_hash generiert einen Hash, der Salzwerte enthält, um die Sicherheit zu verbessern. 2) Passwort_Verify prüfen Sie das Passwort und sicherstellen Sie die Sicherheit, indem Sie die Hash -Werte vergleichen. 3) MD5 und SHA1 sind anfällig und fehlen Salzwerte und sind nicht für die Sicherheit der modernen Passwort geeignet.

PHP: Eine Einführung in die serverseitige SkriptspracheApr 16, 2025 am 12:18 AM

PHP ist eine serverseitige Skriptsprache, die für dynamische Webentwicklung und serverseitige Anwendungen verwendet wird. 1.PHP ist eine interpretierte Sprache, die keine Zusammenstellung erfordert und für die schnelle Entwicklung geeignet ist. 2. PHP -Code ist in HTML eingebettet, wodurch es einfach ist, Webseiten zu entwickeln. 3. PHP verarbeitet die serverseitige Logik, generiert die HTML-Ausgabe und unterstützt Benutzerinteraktion und Datenverarbeitung. 4. PHP kann mit der Datenbank interagieren, die Einreichung von Prozessformularen und serverseitige Aufgaben ausführen.

PHP und das Web: Erforschen der langfristigen AuswirkungenApr 16, 2025 am 12:17 AM

PHP hat das Netzwerk in den letzten Jahrzehnten geprägt und wird weiterhin eine wichtige Rolle bei der Webentwicklung spielen. 1) PHP stammt aus dem Jahr 1994 und ist aufgrund seiner Benutzerfreundlichkeit und der nahtlosen Integration in MySQL die erste Wahl für Entwickler. 2) Zu den Kernfunktionen gehört das Generieren dynamischer Inhalte und die Integration in die Datenbank, sodass die Website in Echtzeit aktualisiert und auf personalisierte Weise angezeigt wird. 3) Die breite Anwendung und das Ökosystem von PHP hat seine langfristigen Auswirkungen angetrieben, steht jedoch auch mit Versionsaktualisierungen und Sicherheitsherausforderungen gegenüber. 4) Leistungsverbesserungen in den letzten Jahren, wie die Veröffentlichung von PHP7, ermöglichen es ihm, mit modernen Sprachen zu konkurrieren. 5) In Zukunft muss PHP sich mit neuen Herausforderungen wie Containerisierung und Microservices befassen, aber seine Flexibilität und die aktive Community machen es anpassungsfähig.

Warum PHP verwenden? Vorteile und Vorteile erläutertApr 16, 2025 am 12:16 AM

Zu den Kernvorteilen von PHP gehören einfacher Lernen, starke Unterstützung für Webentwicklung, reiche Bibliotheken und Rahmenbedingungen, hohe Leistung und Skalierbarkeit, plattformübergreifende Kompatibilität und Kosteneffizienz. 1) leicht zu erlernen und zu bedienen, geeignet für Anfänger; 2) gute Integration in Webserver und unterstützt mehrere Datenbanken. 3) leistungsstarke Frameworks wie Laravel; 4) hohe Leistung kann durch Optimierung erzielt werden; 5) mehrere Betriebssysteme unterstützen; 6) Open Source, um die Entwicklungskosten zu senken.

See all articles