CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionlazy-loading
James Liu
James Liu

Reputation: 53

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

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?

Upvotes: 2

Views: 3974

Answers (2)

user1693593
user1693593

Reputation:

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.

Upvotes: 1

Tschallacka
Tschallacka

Reputation: 28722

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.

Upvotes: 1

Related Questions