Update jquery deferred object element dynamically

Question

I am checking if image is loaded of not using imagesloaded library and if anytime image is not able to load then I am replacing "src" with "data-src". Basically my html structure is as below.

<img id="pics-image-0-1" src="URL1" data-src="URL2" owidth="137" style="visibility: visible; margin-left: -4px; width: 137px;">
<img id="pics-image-0-2" src="URL1" data-src="URL2" owidth="137" style="visibility: visible; margin-left: -4px; width: 137px;">

I have used imagesloaded as below

jQuery("img[id^='pics-image-0").imagesLoaded()
   .progress(function (instance, image) {
        var imgId = image.img.id;
        if (image.isLoaded) {
            //display the image.
        }  else{
            // replace src with data-src
        }
    });

In above code I am replacing src with data-src when I know that URL1 is broken.

But sometimes due to heavy load on sever if URL1 is being served very slow then I want that if URL1 is not able to load in 20 seconds then replace src with data-src.

To do this I am thinking of an independent function which will do it after 20 second. But my question is will it be good approach? Is it fine to modify deferred object at runtime.

I tried to write wrapper on imagesloaded.js to meet my requirement but no luck.

I also tried with https://github.com/darsain/imagesloaded (different version) but not working as expected.

Can anyone suggest how to address above issue? Is replacing url using independent function is fine?