How to add one new attribute to img tag and also need to change value of existing attribute

Question

through jquery code i tried to add a new attribute called delaySrc to img tag and try to change the value of src attribute to all img tag inside in div.

<div class="diagnostic_picture"><img src="test1.gif" /></div>
<div class="diagnostic_picture"><img src="test2.gif" /></div>
<div class="diagnostic_picture"><img src="test3.gif" /></div>

$(".diagnostic_picture img").each(function () {
        var img = $(this);
        img.attr("delaySrc", function () { img.attr("src") })
        img.attr("src", 'images/ajax-loader.gif');
});

src attribute value is getting change but new attribute is not going to add to all img tag in div. please suggest me where i am wrong. what to change in code. thanks

Answer 1

Try this

$(function(){
$(".diagnostic_picture img").each(function () {
        var img = $(this);
        img.attr("delaySrc",img.attr("src"));
        img.attr("src", 'image_url');
});
});

Answer 2

$(".diagnostic_picture img").each(function () {
        var img = $(this);
        img.attr("delaySrc", img.attr("src"));
        img.attr("src", 'images/ajax-loader.gif');
});

Answer 3

You have to return a value from the function passed to attr:

img.attr("delaySrc", function() { return img.attr("src"); });

Or more simply, just pass the value:

img.attr("delaySrc", img.attr("src"));

Answer 4

Live Demo

    $(".diagnostic_picture img").each(function () {
      var img = $(this);
      img.attr("delaySrc", function () { return img.attr("src"); });
      img.attr("src", 'images/ajax-loader.gif');   
      alert(img.attr('delaySrc'));                                           
      alert(img.attr('src'));                                       
    });​

or

Live Demo

$(".diagnostic_picture img").each(function () {
        var img = $(this);
        img.prop("delaySrc", function () { return img.prop("src") })
        img.prop("src", 'images/ajax-loader.gif');                                           
        alert(img.prop('delaySrc'));                                           
        alert(img.prop('src'));     
});
​