Kill Image Request taking too long using JS?

894359
894359 used Ask the Experts™
on
Is there a way to monitor and then kill a server request for an image (preferably in JavaScript) if it is taking too long? The image comes from a 3rd party server so I'd have to kill it on the request side. I'm asking due to us firing 3rd party marketing pixels on our web app. Sometimes they take extreme amounts of time to respond.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Maybe say what you're trying to accomplish or problem to correct.

1) If pixel takes to long, when visitor leaves site, request will die, so no action is required.

2) If pixel is interferring with page render, move the pixel embed code to your document footer.

3) If document footer relocation fails, then wrap pixel in Javascript, to request only begins after page is rendered.

Author

Commented:
There isn't any impact to our site other than the reports that are generated on page load times to our execs. Yes, I've explained DOM content loaded etc. but it doesn't matter.
Multitechnician
Top Expert 2014
Commented:
You can set a timer once the document is ready (mean skeleton of the page is loaded but not ressources like img)
For this example we have two img
a big one : http://image.noelshack.com/fichiers/2016/07/1455836523-2.jpg?t=12
a small one : https://vignette.wikia.nocookie.net/berserk/images/8/8b/E228-Berserker_Capabilities-Manga.png/revision/latest?cb=20170526144400?t=65

to prevent caching (for this example, I put a t=12 and t=65, change it before trying again or be sure to remove/disable the cache

each img,  after a delay of 100ms (please adjust for your needs) check if the img is successfuly loaded (complete), if not, we replace the source by a default picture (I picked one randomly for the demo..)

test page : https://jsfiddle.net/7h4cuem1/

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
        img {
            width:355px;
            height:355px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
            $("img").each(function() {
                var img = $(this);
                setTimeout(function() {
                    if(!img[0].complete) {
                        console.log("not loaded :(");
                        img.attr("src", "http://www.51allout.co.uk/wp-content/uploads/2012/02/Image-not-found.gif");
                    }
                }, 100); // we give it 100ms to load before changing its URL / SRC
            });
        });
    </script>
</head>
<body>
<img src="http://image.noelshack.com/fichiers/2016/07/1455836523-2.jpg?t=12"/>
<br>
<img src="https://vignette.wikia.nocookie.net/berserk/images/8/8b/E228-Berserker_Capabilities-Manga.png/revision/latest?cb=20170526144400?t=65"/>
</body>
</html>

Open in new window


first img too long to load, second img it's ok
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Well... If it has no impact... ignore it...

Or, if you prefer getting this... "off your reports"... then use the #3 option above, so have some Javascript fire on "Document Ready", to fetch the pixel in background.

Author

Commented:
One issue is I don't create the calls or have control over the format/ structure. The calls are automatically generated by our analytics code (Adobe). The image requests are for transparent 2 x 2 px. gifs. They use the trojan horse (beacon technology) approach (query string on img request has the info attached using a query string.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial