I encountered a similar issue and resolved it in the following manner:
To sum it up:
When I created the element, I set src='Blank.gif' and used
setAttribute("data-src",response[i].photo_url)
. Since
Blank.gif does not exist, it would appear as a broken image link if the following approach did not work or if it couldn't load quickly enough...
Subsequently, I checked during scrolling to determine when the element was in view and then set the src to 'data-src'. This method proved to be very effective for me...
Delving into the specifics!
window.onscroll = function() {
var top = document.body.scrollTop;
var bottom = document.documentElement.clientHeight + top;
var img;
for (var i=startImage;i<index;i++){
img = document.getElementById("image" + i);
var a = img.style.top.substring(0,img.style.top.length-2);
var b = bottom;//Just for simplicity...
if (a < b) {
if (img.src.indexOf('Blank.gif') != -1) {
img.src = img.getAttribute("data-src");
}
startImage++;
}
}
}
Hopefully, this solution can spare someone else 2 1/2 hours of searching and effort!
Feel free to provide feedback if you have any suggestions on how to enhance the above method!