jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen

Donnerstag, 30. Oktober 2008

Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelt, Bibliotheken Javascript, die Verwendung von canvas etc. ...
Für rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:

Demo-und Source -

Lesen Sie weiter ... "

Verwandte Post

Tags:
Veröffentlicht in CSS, Design & Grafik, Internet, Javascript, Entwicklung, Tutorials, jQuery | Kein Kommentar »

Rendite Verringerung der Bilder-Browser

Mittwoch, 5. Dezember 2007

Im Prinzip, wenn Sie ein Bild in ein HTML-Dokument sollte ihre ursprüngliche Größe. Allerdings, die das IMG ist es möglich, die Breite (Breite) und Höhe (Höhe) von jedem Bild, unabhängig von ihrer ursprünglichen Größe. Diese Größe ist, die - natürlich - aus dem Browser.
Usare le dimensioni orginali di un’immagine è buona cosa, nonostante in alcuni casi comporta un doppio lavoro per il Web Designer e/oi motori dinamici (CMS ad esempio o librerie di manipolazione grafica) presenti sul Web Server. Ein klassisches Diashow, zum Beispiel, die in der Regel zeigt Thumbnail-Vorschau oder (Bild Größe reduziert) zeigen, dass, wenn Sie das Original-Bild größer. Das heißt, wir müssen zwei Größen des gleichen Bildes: eine für die Mini-und eine größere aus. So passiert, dass in einigen umliegenden Sie vermeiden, dass ein Miniaturbild und links an den Browser, um das Bild kleiner, so dass die Attribute width und height in der das IMG

Der Einsatz von Fingerabdruck hat zwei direkte Vorteile: Die Last reduziert ist sehr schnell und die Darstellung ist gut, oder hat, die wir ausgewählt haben (zum Beispiel, wenn wir bereit Thumbnail mit Photoshop). Umgekehrt wird, wie bereits erwähnt, haben wir um zwei verschiedene Bilder und alle Änderungen an der Website zu berücksichtigen, dieser Faktor.

Die uns zwingt, eine kleinere, in der Tat, nicht beschleunigen den Prozess des Herunterladens der gleiche: wenn ich ein Bild von 8000 x 8000 Pixel und das Monster als Thumbnail-100 × 100 Pixel, den Browser herunterzuladen comuqnue 8000 × 8000 und nach einer Größe!

Ich habe einige Tests mit verschiedenen Browsern auf Windows Vista, mit 4 Bilder von 1024 × 768 Pixel ridimesionate 100 × 90 Pixel, und hier sind die Ergebnisse der Leistung auf verschiedenen Browsern.

Firefox 2.0.0.11 Bild (schlecht)
Bild

Microsoft Internet Explorer 7 Bild (schlecht)
Bild

Opera 9.24 Bild (gut)
Bild

Safari 3.0.4 (523.12.9) Bild (sehr gut)
Bild

Safari gewinnt über alle, mit einer wirklich guten Leistung in der Zeit um die Datei herunterzuladen. FireFox und IE7, überraschend, sind nahezu identisch mit FireFox sin. Opera ist eine Hälfte mit einem Rendementwert weit besser als IE7 und Firefox, sondern unter dem stravince Safari!

Verwandte Post

Tags:
Posted in Internet, Technologie | 5 Kommentare »