Fehlende Bilder mit Javascript / jQuery ersetzen

von
  • frontend /
  • javascript

In einem unserer Projekte rufen wir von einer Website Daten ab, die wir danach als Liste anzeigen.

Dabei kommt es vor, das Bilder in einer bestimmten Größe nicht vorhanden sind. Diese werden als fehlendes Bild im Webbrowser angezeigt.

Um keine Serverlast für die Überprüfung der Bilder zu erzeugen suchte ich eine Möglichkeit, die fehlenden Bilder im Webbrowser - Clientseitig - durch ein Platzhalter Bild zu ersetzen!

Die Lösung ist folgende:

Das folgende Skript reagiert auf vom IMG verursachte Error-Events. Tritt dieses für ein Bild auf, wir der Fehler zurückgesetzt und das hinterlegte Platzhalter Bild angezeigt.

Voraussetzung: jQuery
$(function () {
    $("IMG").error(function () {
        $(this).unbind("error").attr("src", "/image/placeholder-no-image.jpg");
    });
});

Da hier auf Events reagiert wird, ist auch kompatibel zu Lazy-Load Plugins wie Unveil.js

PageSpeed Insights Tipp: Disqus redirects vermeiden

von
  • performance /
  • seo /
  • frontend

Heute habe ich eine unserer Webseiten mit Google PageSpeed Insights auf Optimierungspotenzial getestet.

Auf dieser Webseite ist auf allen Artikeln ein Kommentarformular von Disqus eingebunden.

Hierzu ein Tipp von Pagespeed: "Vermeide Weiterleitungen"

Disqus bindet das Javascript embed.js von einem Server mit einer personalisierten Subdomain disqus-shortname.disqus.com ein, leitet diese dann jedoch auf eine unpersonalisierte Subdomain go.disqus.com weiter.

Die Lösung ist folgende:

Setze die Subdomain in der Variable dsq.src direkt auf die "go"-Subdomain!

//dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
dsq.src = 'http://go.disqus.com/embed.js';

Nach dieser Änderung ist der Redirect verschwunden und kommentieren via Disqus funktioniert wie zuvor!

Strato - htaccess und gzip

von
  • performance /
  • seo /
  • server

Lange habe ich nach einer Lösung gesucht, wie auf einem Strato-Paket gzip-Kompression aktiviert werden kann.

Die Lösung ist folgende:

Erstellen einer .htaccess Datei mit dem folgendem Inhalt: mod_gzip_on Yes

Datei: .htacces
mod_gzip_on Yes

Nun wird das HTML sowie das CSS Stylesheet gzip-Komprimiert ausgeliefert.

Nachdem die .htaccess gespeichert wurde kann man auf der HTTP-Compression-Test Seite kontrollieren, ob die GZip-Kompression funktoniert!

Nützliche Links

Sinnvolle Chrome Extensions