CODEWITHSUNDEEP
javascriptimage
Juvenik
Juvenik

Reputation: 950

Finding the image count in a web page

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.

Upvotes: 0

Views: 4619

Answers (4)

Arnav Rastogi
Arnav Rastogi

Reputation: 1

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

$$('img').length

Upvotes: 0

Arnav Rastogi
Arnav Rastogi

Reputation: 1

Use this simple approach for links

$$('a').length

Upvotes: 0

howdyAnkit
howdyAnkit

Reputation: 7

// 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.

Upvotes: 0

vsync
vsync

Reputation: 130264

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?

Upvotes: 1

Related Questions