jQuery Image preload als background-image

[piXeLfanatiker]

Servus,

ich habe ein Script im gefunden, mit welchem Bilder mit der jQuery geladen werden. Jedoch wird das Bild mit dem img-tag in einen Div eingefügt.
Für meine Verwendung ist es als background-image notwendig, da ich noch einen Div über das Bild legen möchte.
Hier das original-Script und darunter meine Änderung, welche leider nicht funktioniert.

Danke für eure Hilfe

Grüße
Florian

<script src="/js/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
    <!--
    $(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
    });
    
    //-->
    </script>


<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
    <!--
    $(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#eyecatcher').removeClass('home').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('style', 'background-image', 'images/eyecatcher.jpg'); 
    });
    
    //-->
</script>

[Nightflyer]

Versuch mal anstatt

}).attr('style', 'background-image', 'images/eyecatcher.jpg');

}).css({ 'background-image', 'images/eyecatcher.jpg' });

oder

}).attr('style', 'background-image: url( "/images/eyecatcher.jpg")';

[CaselPasel]

oder

}).css({backgroundImage: 'url(images/eyecatcher.jpg)'});

Stimmt der Pfad ??

Mit freundlichen Grüßen

Cas

[richtsteiger]

Wobei ich es merkwürdig finde, einem image ein Hintergrundbild zu verpassen.

Wäre es stattdessen nicht sinnvoll, einfach dem DIV-Container dann das
Background-Image zu verpassen? Also so z. B.:

<script type="text/javascript">
    <!--
    $(function () {
        var img = new Image();
        $(img).load(function () {
            $('#eyecatcher').css({
                backgroundImage: 'url(images/eyecatcher.jpg)'
            });
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'images/eyecatcher.jpg');
    });
    //-->
</script>

[CaselPasel]

Hey,
da hast du recht darauf habe ich gar net geachtet.
Das wird wahrscheinlich auch nicht funktionieren!

SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Mit freundlichen Grüßen

Cas

[piXeLfanatiker]

der Pfad stimmt. Mit dem original-Code klappts. Nur benötige ich eben das geladenen Bild als background des Divs "eyecatcher".

Oder meinst du den Pfad der Objekte in html?

Eure drei Vorschläge tun leider nicht.

Edit:
danke @ richtsteiger. So klappts. jedoch fehlt nun das fade in.
werd gleich mal probieren, ob ich es wieder einfaden lassen kann.

[piXeLfanatiker]

Danke nochmal. FadeIn vom Hintergrundbild tut nun auch.

<script type="text/javascript">
    <!--
    $(function () {
        var img = new Image();
        $(img).load(function () {
            $('#eyecatcher').hide();
			$('#eyecatcher').css({
                backgroundImage: 'url(images/eyecatcher.jpg)'
            });
			$('#eyecatcher').fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'images/eyecatcher.jpg');
    });
    //-->
</script>