Kill Image Request taking too long using JS?

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.
894359Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
0
894359Author 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.
0
leakim971PluritechnicianCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
0
894359Author 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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.