jquery images with preloading image

Question

$(document).ready(function(){
        // The plugin
        $.fn.image = function(src, f){
        return this.each(function(){
                var i = new Image();
                        i.src = src;
                        i.onload = f;
                        this.appendChild(i);
                });
        }

        // The code for the image to load
  $("#asdf").image("images/3a.jpg",function(){
            alert("The image is loaded now");
        });     
});

ive found the above code. I want to have an element that can be loaded with an image, but before the image is fully loaded i want it to show a loading gif, (done this using css). It works but will show the image loading instead of waiting for it to be fully loaded. I think i should be showing the image where the alert is using hide() show() but im not quite sure how to reference it from inside the function?

ive tried this with no luck, anyone see any problems>? i want to use the same div for the loading gif then the final image

$('#preload').replaceWith('<img src="preloader.gif" />')
          .image( "http://www.google.co.uk/intl/en_uk/images/logo.gif", function() {
             $('#preload').replaceWith( this );
             // is this called when image fully loaded?
          });

tvanfosson · Accepted Answer · 2009-06-07 19:21:22Z

3

You might want to try using the Lazy Loader plugin (or a similar one) instead. Note that you can specify your own placeholder image.

edited Jun 7, 2009 at 19:21

answered Jun 7, 2009 at 19:01

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tvanfosson Over a year ago

I removed my original answer as I missed that the image wasn't being replaced, but instead injected into a DIV. My answer wouldn't work in the later case.

karim79 · Accepted Answer · 2009-06-07 19:21:58Z

0

You could try something like this:

    var $loadingImg = $('<img />').attr('id','loadingImg').attr('src','preloader.gif');
    $("#preload").html($loadingImg.html()).image("http://www.google.co.uk/intl/en_uk/images/logo.gif");

Do let me know how it goes.

answered Jun 7, 2009 at 19:21

karim79

343k67 gold badges420 silver badges409 bronze badges

Comments

michael · Accepted Answer · 2009-06-07 20:50:01Z

0

found a plugin that does exactly what im looking, using a placeholder gif image untill the image is fully loaded then showing the final image

http://flesler.blogspot.com/2008/01/jquerypreload.html

answered Jun 7, 2009 at 20:50

michael

1,2125 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

jquery images with preloading image

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related