How to find all img src attributes from sfpg (Single File PHP Gallery)

Question

I am trying to create a user script in Greasemonkey to iterate over all the imgs in the following gallery to download the actual images from the thumbnails.

The difference between thumbnail and image is the value of the url query parameter; so we have to change cmd=thumb into cmd=image. Which is pretty easy.

so first I am trying get all the img tags in a var and then trying to iterate over all the tags and in each iteration using string replace to change the thumb into image to get the actual image.

But this method is not retrieving any img!!! In every other page I can find all imgs , except this page.

Would be helpful if anyone can tell me why it is happening?

URL: http://sye.dk/sfpg/demo/index.php?sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKipkN2UwYWI2MTRkZGU2MTBiYjliMzEzM2M2ZDUzODE3MTY0OWU4ZWI3YjU0MzcwMTU2ODIxN2YxMTA2NWFiOWEw

In the following snippet , first I am trying to see all the img tags in console, but its returning only baseURI, not the internal imgs. I have also checked the tags.count is returning 1 , instead of 3, as there are three images on this page. Unless I am able to find the imgs, I can't do the next part , i.e., changing the URL and autodownload. That code is ready with me and working on other websites.

// ==UserScript==
// @name     Unnamed Script 629250
// @version  1
// @match        http://sye.dk/sfpg/demo/index.php?sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKipkN2UwYWI2MTRkZGU2MTBiYjliMzEzM2M2ZDUzODE3MTY0OWU4ZWI3YjU0MzcwMTU2ODIxN2YxMTA2NWFiOWEw
// @grant    none
// ==/UserScript==

(function() {
    'use strict';
 var tags = document.getElementsByTagName('img');
       
  for(var i=0;i<tags.length;i++){
 
      console.log(tags[i])
   
}
})();

Answer 1

The images are lazy-loaded - they're not included in the HTML immediately on page load. The lazy solution would be to add a small setTimeout before trying to select the imgs.

Another issue is that there are more than just the three imgs there - better to select only the ones in the thumbnail view, with .thumbbox img. Try something like this instead:

// ==UserScript==
// @name     sveimages
// @version  1
// @match    http://sye.dk/sfpg/demo/index.php?sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKipkN2UwYWI2MTRkZGU2MTBiYjliMzEzM2M2ZDUzODE3MTY0OWU4ZWI3YjU0MzcwMTU2ODIxN2YxMTA2NWFiOWEw
// @grant    none
// ==/UserScript==

setTimeout(() => {
  const fullImageURLs = Array.from(
    document.querySelectorAll('.thumbbox img'),
    img => img.src.replace('cmd=thumb', 'cmd=image')
  );
  console.log(fullImageURLs);
}, 100);

Output:

Array(3)
0:"http://sye.dk/sfpg/demo/index.php?cmd=image&sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKkNsZW1lbnRpbmVzLmpwZyowZmYzZmJlOTBlZjI3MjRhMzIwYzEzY2UxNzgzMGFlYTg3ZjM2OTg0NjZhOTM3NzllNWNhNTY1Y2FkNjczNmYy"
1:"http://sye.dk/sfpg/demo/index.php?cmd=image&sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKkZ1bm55IEZydWl0LmpwZypjMmY5ZGI2ZmEzZDA1Y2UxNGE1NmQ1OGVmODA1YjhmNTU1ODU2MmZmNzZhM2RmNDUxMmFmNGRiODE5YTg1YTc1"
2:"http://sye.dk/sfpg/demo/index.php?cmd=image&sfpg=RnJ1aXRzL09yYW5nZSBGcnVpdHMvKk9yYW5nZXMuanBnKmQ2ZDlkMDc1MDYxMWI4OTA5NDk1NGE1NzEzMmE3ZDg5YWYzNDllNjQ4YTgwMzhkODg5YzhjZTViMzZlNjUwNTM"
length:3