Grow your CSS skills. Land your dream job.

Do Something when User Forcing to Stop the Browser Loading

  • # January 5, 2013 at 8:52 am

    So, basically I want to load an external file with JavaScript on page load. But want to do the same thing when users force to stop the browser loading process of a page that hasn’t finished loading (for slow connections). Is this possible?

    **Illustration:**

    window.onload = doSomething;
    window.onstop = doSomething;
    # January 5, 2013 at 9:01 am

    What if you loaded the script by default but cancelled the function on load?

    Alternatively, if the JS is manipulating elements on the page, what if you used CSS classes? I.E a default ‘not-loaded’ class on your body element that the JS manipulates. Then have JS when loaded properly change the body class like ‘loaded’ and therefore that would respond to the JS in that circumstance?

    # January 5, 2013 at 10:05 am

    @andy_unleash I’m confusing :p I want to trigger the same thing in two situations: Loaded, or Forced to Stop.

    I don’t want the external files (script or stylesheet) loaded by default. So basically I want to load JSON (for the example) only when the page is loaded. But, if the user stop the page loading because of the slow connection or something, it would also trigger the JSON to loading:

    var loaded = 0;

    function loadJSON() {
    $.ajax({
    url: 'hxxp://blabla.com/feeds/posts/summary?alt=json-in-script',
    success: function() {
    alert('Hopla!');
    }
    });
    }

    $(window).on("what-custom-event??", function() {
    loadJSON();
    loaded = 1;
    });

    $(window).on("load", function() {
    if (loaded === 0) {
    loadJSON();
    }
    });

    The logic is: If the page has successfully loaded, a `Hopla!` message will appear. If the page loading is stopped by force, a `Hopla!` message will appear too.

    # January 5, 2013 at 10:12 am

    I may be wrong but why can’t you just not use onload? Can’t it just be a self executing function?

    # January 5, 2013 at 10:33 am

    The main priority is that the function will triggered after the page successfully loaded.

    A simple case: A loading animation layer that covered the whole page will appear before the page has been loaded, and will fade-out if the page has been loaded. But what if the page still does not loaded? If only I can make the layer invisible when users forcing to stop the browser loading, then that’s what I need.

    By the way, my main goal is to load the JSON on two situations that I wrote above, because this part is quite important, but too large to be loaded in the same time with others and it’s likely will interfere with other loading processes.
    It’s OK. I will also try to find the way in other places as well. If any…

    # January 5, 2013 at 1:35 pm

    Can’t you just use a try catch block?

    # January 5, 2013 at 10:14 pm

    @JohnMotylJr: How? I don’t know.

    PS: I got an example of JavaScript event called `onerror` and `onabort` but it’s not working for `window` (as far as I’v tried).

    # January 5, 2013 at 10:23 pm
    try {
    //... Code you want to run...
    } catch (the error you want to catch) {
    //... Do this stuff instead...
    }
    # January 5, 2013 at 10:31 pm

    Nevermind, I read your above and I think your logic is just a little off. Your not wanting to load externals if something is forced to stop loading?

    # January 6, 2013 at 2:58 am

    @JohnMotylJr: Contrarily. I want JavaScript to do something when the browser totally stop doing something.

    Onload means “stop doing something”.
    Then, what about Stopped?

    I just find it difficult to describe and to exist.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".