jQuery: any way to append variable to img without it loading twice?

Question

I'm trying to tweak this hotlink prevention method by having the img urls get the appended ?i only when visited by a JavaScript-enabled browser as opposed to bots.

Using this in the $(document).ready(function() works:

var img= $("img.myimg");
img.attr("src", img.attr("src")+"?i");

However, it causes the img to load twice.

Is there any other way of appending the parameter for human visitors that won't cause the double load? And to clarify, I don't mean the image shows up twice on the page, but that the server gets hit twice as the url changes.

Answer 1

If you want the image not only be loaded once, and not be seen in its best version by bots, then you can only load it in JQuery, just the once. Then slitcanvas' answer applies:

<img class="myimg" notthesrc="whatever.jpg" />

In the JQuery:

var img= $("img.myimg");
img.attr("src", img.attr("notthesrc")+"?i");

This way the image is not loaded in HTML, and not by bots. It is only loaded by JQuery.

=========

If you want a version of the image to be found by Google image and other bots, and then a different (larger, better, with no copyright notice or watermark etc) then you can't escape having two images:

<img class="myimg" src="whatever" />

In the JQuery:

var img= $("img.myimg");
img.attr("src", img.attr("src")+"?i");

where "whatever" is the URL of that will return the bots version - e.g. a lowres image with watermarking, and "whatever?i" returns the good one.

In that case two images are loaded, the first one being for bots.

Answer 2

Couldn't you have :

<img class="dheimg" presrc="/location-of-file/name.jpg" src="" [height/width/alt] />

Without the src tag and then add it using javascript after the page has loaded?

$(document).ready(function(){
    var img= $("img.myimg");
    img.attr("src", img.attr("presrc")+"?i");
}

I've updated my answer to store the path in an additonal attribute that won't load the image by default.