blur.js versucht, "none" und div nicht zu ersuchen 100%

Question

Ich versuche, die http://blurjs.com/ verwenden, um unsere BG des Header-Bildes zu verwischen. Aber es gibt mir einen interessanten Fehler, den ich nicht nachvollziehen kann. Es kann etwas mit dem Hauptcode und der Kompatibilität zu tun haben, aber ich bin mir nicht sicher.

http://jordan.rave5.com/tmp/

Fehler ist

fehlgeschlagen Ressource laden: der Server mit einem Status von 404 geantwortet (Not Found) http://jordan.rave5.com/tmp/none

Auch der Hintergrund-Gradienten div hat Schwierigkeiten Expanding 100%, wenn die Seite das Laden anfängt, wenn das Inhaltsfeld klein ist. Ich habe versucht, ein anderes div innerhalb von 100% oder größer hinzuzufügen, um es heraus zu schieben, aber es endet nur, die Fußzeile weiter nach unten zu schieben, wenn der Inhaltsbereich erweitert wird. Irgendwie nervig.

Answer 1

Ihr Code schlägt in Zeile 285 von blurjs.js fehl. Dies liegt daran, dass blurjs nach einer CSS-Eigenschaft für das Element sucht, das Sie als source (Zeile 202) übergeben. Sie stellen .header-img (ein Bildelement) als Quelloption ein, und daher kann blurpjs keine background-image -Eigenschaft darauf finden, daher wird der Standardwert der css -Eigenschaft zurückgegeben, none und Sie erhalten den Fehler, wenn Sie versuchen, eine zu laden Bild mit diesem Wert. Ändern Sie blurjs.js in Zeile 202:

var formattedSource; 
if($source.is('img')) 
    formattedSource = $source.attr('src'); 
else 
    formattedSource = ($source.css('backgroundImage')).replace(/"/g, "").replace(/url\(|\)$/ig, "");