Loading images in jQuery

Question

So here's the problem,

I'm trying to load images using jQuery to speed up the page downloading. To accomplish it, I have the following code as an image, which I want to load after the page loads.

<img src="/pixel.png" new-img="/newimage.png"/>

Then, to load the final image after the document fully loads, I've used the following.

$(document).ready(function(){ 
    $("img").attr("src", $("img").attr("new-img"));
});

This works fine for a single image, except I have multiple images that I want to convert to this. I'm completely stumped as when I try and load multiple images like this, it sets all the images to the last image loaded.

I'm not sure, but does '$(this)' have anything to do with it?

JSFiddle: http://jsfiddle.net/AeroMcDoom/8sxED/

Are you sure you are not reinventing the wheel?

Salman Arshad
– Salman Arshad

2013-12-11 11:17:44 +00:00
Commented Dec 11, 2013 at 11:17 — Salman Arshad
– Salman Arshad, Commented Dec 11, 2013 at 11:17

A. Wolff · Accepted Answer · 2013-12-11 11:14:50Z

6

Use that:

$("img").attr("src", function(){return $(this).attr("new-img")});

FYI, you should use data-* attribute instead:

<img src="/pixel.png" data-img="/newimage.png"/>

And then:

 $("img").attr("src", function(){return $(this).data("img")});

answered Dec 11, 2013 at 11:14

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

2 Comments

Céryl Wiltink Over a year ago

What? you can use a function as the second parameter in attr()? Game changer!

A. Wolff Over a year ago

@CerylWiltink Ya, check DOC: .attr( attributeName, function(index, attr) ) api.jquery.com/attr/#attr-attributeName-functionindex--attr

RononDex · Accepted Answer · 2013-12-11 11:16:20Z

1

Try this:

$("img").each(function(){$(this).attr("src", $(this).attr("new-img"))});

.attr on a selector that matches more than one element won't work as you do it. .attr() will set the attribute of all images its find to the defined content. Also you can't set it using $("img").attr("new-img") because .attr() always returns only the first value it finds from the selector.

answered Dec 11, 2013 at 11:16

RononDex

4,19526 silver badges40 bronze badges

Comments

Miquel Las Heras · Accepted Answer · 2013-12-11 11:17:03Z

0

$(document).ready(function(){ 
    $("img").each(function(){
      $(this).attr('src',$(this).attr("new-img"));
    });
});

answered Dec 11, 2013 at 11:17

Miquel Las Heras

7605 silver badges9 bronze badges

Comments

MildlySerious · Accepted Answer · 2013-12-11 11:24:08Z

0

With a little less overhead:

$(function(){ 
    $("img").each(function(){
        this.src = this.getAttribute('data-newimg');
    });
});

There is no need to initialize jQuery one or two times per image for this, unless you need this to work on IE6.

answered Dec 11, 2013 at 11:24

MildlySerious

9,2403 gold badges31 silver badges31 bronze badges

Comments

NickHTTPS · Accepted Answer · 2013-12-11 11:53:16Z

0

I think you can save an extra HTTP request by doing this:

<div class="lazy">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA ///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    data-src="/newimage.png"
    alt="Good to go" />
</div>

And the JS:

$(window).on('load', function() {

   $(".lazy > img").each(function(){
      var src = $(this).attr('data-src');

      $(this).attr('src',src);
   });
});

answered Dec 11, 2013 at 11:53

NickHTTPS

7994 silver badges19 bronze badges

Collectives™ on Stack Overflow

Loading images in jQuery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Related