0

I have a JS code, that gets called in different web pages of my clients. I want to fetch the total number of images. I want only those images that are visible to the user and not just any other images. This is my JS code

    function getImageCount(topWindow) {
        try {
            var images = topWindow.document.getElementsByTagName('img');
            var imageCount;
            for (var i=0, length = images.length; i < length; i++) {
                var image = images[i];
                var clientWidth = image.clientWidth;
                if(clientWidth && clientWidth > 1) {
                    var src = image.getAttribute('src');
                    if(src) {
                        src = src.toLowerCase();
                        if(src.indexOf('.jpg') !== -1 ||
                           src.indexOf('.jpeg') !== -1 ||
                           src.indexOf('.gif') !== -1 ||
                           src.indexOf('png') !== -1) {
                           imageCount =  imageCount ? ++imageCount : 1;
                        }
                    }
                }
            }
            return imageCount;
        } catch (e) {
            processError("getImageCount", e);
        }
    }
 var imageCount = getImageCount(top);

I have been trying a lot to stabilize this code so that it works correctly across all different types of web pages. Basically what I want is a generic code that captures image counts correctly.

Eg: My code gives image count as 1 for http://www.msn.com/en-us/news/other/one-free-agent-every-nfl-team-should-sign-this-offseason/ss-AAmLlC0#image

What I want is a GENERIC CODE that gives me a correct image count irrespective of where it runs. Can some one give me some detailed solutions.

I would appreciate a lot.

Juvenik
  • 900
  • 1
  • 8
  • 26
  • should it count images in iframes also? –  Feb 14 '17 at 09:32
  • 1
    [`top`](https://developer.mozilla.org/en-US/docs/Web/API/Window/top) at MDN. There are also images attached to the background of elements by CSS, and images drawn into canvas and svg elements, should they be taken into count too? – Teemu Feb 14 '17 at 09:39
  • Yes, if they are visible, we need to take them into account. – Juvenik Feb 14 '17 at 10:44
  • I think you would have to count all css loaded images, as you can't know which are visible and which are not. And then you would need some function to check for images inside the viewport. But presumably you would need to bind that to a scroll function (as the images that are visible would change on scroll). – lharby Feb 14 '17 at 12:02
  • All the requirements you have makes the question too broad. There are posts about detecting element's visibility, and finding CSS-images, at SO, search for them. You can apply [the answer of mine](http://stackoverflow.com/a/24096958) to search elements from iframes, "irrespective where [the code] runs". You could consider all canvases and svgs as images, technically they are, though they might contain plain text only. Combine all the details to your code, and if you'll get stuck, ask a new question. – Teemu Feb 14 '17 at 12:45

4 Answers4

1

To simplt count all the images (<img>) on the page:

document.images.length

And to count all the "visible" images (ones with width and height):

[...document.images].filter(img => img.clientWidth && img.clientHeight).length

This will give you the number of images on the page. This does not include CSS images. since your code didn't either then I take it you want <img> ones

I didn't quite understand the meaning of irrespective of where it runs.. can you elaborate?

vsync
  • 118,978
  • 58
  • 307
  • 400
  • Top is basically a 'top' variable of javascript. I want the valid images that are visible to the user and ignore all other images. – Juvenik Feb 14 '17 at 09:36
  • Sorry, I forgot to mention that I want only those images that are visible to the user. I edited the question. Thanks – Juvenik Feb 14 '17 at 09:38
  • @Juvenik - potentially visible? because the user might never scroll to see them or maybe they are *lazyloaded* so they are invisible until scrolled to. you cannot really know if they are *lazyloaded* or not. – vsync Feb 14 '17 at 09:38
  • what if they are not lazy loaded. How can get it. – Juvenik Feb 14 '17 at 10:43
  • @Juvenik - updated my answer to give count of all "visible" images (in ES6) – vsync Feb 14 '17 at 11:11
  • I want the CSS images too. If u see properly, my code is same as that of urs. But I want to change my code and make it generic to access all kinds of images that are visible to the user. – Juvenik Feb 14 '17 at 11:18
  • 2
    @Juvenik - you cannot know if images in the CSS are meant to be seen or not. some might be for `hover` purposed or for reloading and many times the CSS is referencing HTML code which doesn't exist at all or is deprecated. there is no point in checking the CSS *IMHO*. – vsync Feb 14 '17 at 11:30
0

// Extract images

websiteImages = document.getElementsByTagName('img'); 
for (url in websiteImages) 
console.log(websiteImages.length);

//Extract inbound and outbound links

Links = document.querySelectorAll('a'); 
for (link in Links) 
console.log(Links[link].href);
  1. Paste this Scripts into your console of browser
  2. Check on the Below Link/ any Link you like (https://news.google.com/topstories?hl=en-IN&gl=IN&ceid=IN:en&gl=IN&ceid=IN:en)
  3. The above-mentioned script will give all the Images present in the webpages. And the second script will give all the number of Inbound and Outbound/exit links
  4. Just apply Some filter as per your use case and you will be good to go.
howdyAnkit
  • 7
  • 2
  • 7
0

To count the number of images on a webpage use the below code:

$$('img').length
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Arnav Rastogi
  • 1
  • 1
0

Use this simple approach for links

$$('a').length

Arnav Rastogi
  • 1
  • 1