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

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

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:

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

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?

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

1. Der Server speichert mehrere Sätze von Bildern unterschiedlicher Größe

2. 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 data-lazy-img="done" width="130" height="130" title="【京东超市】蒙牛 纯甄 常温酸牛奶 200g*12 礼盒装" src="//img12.360buyimg.com/n1/s130x130_jfs/t3163/260/532931768/76885/977fb56c/57b9d838Nda11d3bb.jpg"></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 .