0

Essentially, my code is,

<img src="/video_feed" />

and when you load the website, it takes 20 seconds before the video feed begins.

I'd like to display a loading gif while you wait.
But I'm not sure what event to listen for.

I tried $(window).ready() but that happens immediately. Any idea if there's an event for when the video feed begins?

Or some JS trick? Ajax call that changes div contents on success, maybe, instead of image src?

The video tag isn't working.

Christoph Rackwitz
  • 11,317
  • 4
  • 27
  • 36
djb
  • 1,635
  • 3
  • 26
  • 49
  • 1
    Does this answer your question? [jQuery load function after video loaded](https://stackoverflow.com/questions/38012592/jquery-load-function-after-video-loaded) – evolutionxbox Aug 15 '22 at 14:40
  • I'm not sure if I can use a video tag here. Maybe. But it's not a mp4. It's a multipart/x-mixed-replace; boundary=frame serving image/jpeg – djb Aug 15 '22 at 14:43

1 Answers1

0

Ok worked it out. Made another python route that returns data in a list once it's loaded. In JS, poll until it doesn't get an empty list. When it gets data, then hide the gif.

        var interval = window.setInterval(function(){
            $.getJSON('/ready', function(data){
                if (data.length != 0) {
                    $("#animation").hide().css("visibility", "hidden");
                    clearInterval(interval);  // stop checking it
                }
            })
        }, 1000);
djb
  • 1,635
  • 3
  • 26
  • 49