How can I create new attribute based on img src and use original src value for another?

Question

I want to use Lazy Load which requires an attribute named "data-original" which points to the original image src value. I can create the new "data-original" with the value from the src attr like this without a problem:

  $('img.lazy').each(function() {
    a =  $(this).attr("src");
        $(this).attr("data-original", a);
   }); 

But, if I follow with this (which Lazy Load needs the src value to be):

  $('img.lazy').each(function() {
    b =  "img/grey.gif";
        $(this).attr("src", b);
   }); 

The data-original and src atrr both become "img/grey.gif"

Thanks from the newbie!

Answer 1

You could put both in the same loop. And even thought this is probably not a problem here, you should normally use "var a = ..." if you are not using a global variable called a.

$('img.lazy').each(function() {
   $(this).attr("data-original", $(this).attr("src"));
   $(this).attr("src", "img/grey.gif");
}); 

Answer 2

Changing some attributes of DOM elements are not permitted by some (or maybe all?) browsers -for security reasons- using the jQuery .attr() method. If that is the case you can use the following approach.

$('img.lazy').each(function() {
    $(this).attr("data-original",$(this).attr("src"));
    $(this)[0].src = "img/grey.gif";
    // or $(this).get(0).src = "img/grey.gif";
});

[EDIT]

Switched the order:

$('img.lazy').each(function() {
    var src = $(this).attr("src");
    // assign the initial src value to temp var
    $(this)[0].src = "img/grey.gif";
    // or $(this).get(0).src = "img/grey.gif";
    $(this).attr("data-original",src);
});

I'm not familiar with Lazy Load. There's a chance that it might be replacing the elements instead of changing their attribute values. If that is the case then you will need to take a different path.

[END EDIT]

I'm not sure if that's your issue here, though.