How to force loading images for the webpages installed "lazy load" without scrolling?

Question

I implement a Chrome extension. The extension needs to get all images URLs of webpages. However, some webpages have "lazy load" plug-in. My question is if it is possible that I can still get URLs without required manually scrolling down?

Answer 1

Many of the lazy-load plugins stores the actual URL in the data-* section. When scrolling down, right before the image tag gets into view the data-* content is set on the src attribute to start loading the image.

You can iterate through all the image tags like this to find the links, for example:

var images = document.querySelectorAll("img"),
    links = [], i = 0, img;

while(img = images[i++]) 
    links.push(img.dataset.original || img.src);

But note that there is no naming standard for the data-* holder so different plugins will use different names - you'll have to collect these manually (f.ex. this plugin uses the name data-original, this one uses data-layzr and so on).

You could possible do an addition step looping through the dataset collection to find any string which may seem to contain an URL (if src is empty), but also this is prone to errors as images from the same server often are relative links and data-* can hold other data too.

Answer 2

Looking at the source code you can trigger the 'appear' event event on all the images.

$('img').trigger('appear');

Would help if you would privde a jsfiddle to test on.