Using resize to getScript if above x pixels (jQuery)

问题

So I have an issue with this script. It basically is loading the script on any resize event.

I have it working if lets say...
- User has window size above 768 (getScipt() and content by .load() in that script)
- Script will load (and content)
- User for some reason window size goes below 768 (css hides #div)
- User re-sizes again above 768, And does not load the script again! (css displays the div)

Great. Works right.

Now.. (for some cray reason)
- User has window size below 768 (Does NOT getScript() or nothing)
- User re-sizes above 768 and stops at any px (getScript and content)
- User re-sizes again anything above 768 (It getScript AGAIN)

I need it to only get script once. Ive used some code from here

jQuery: How to detect window width on the fly?

(edit - i found this, which he has the same issue of loading a script once.)

Problem with function within $(window).resize - using jQuery And others i lost the links to :/

When i first found this problem I was using something like this, then i added the allcheckWidth() to solve problem. But it does not.

var $window = $(window);
function checkWidth() {
    var windowsize = $window.width();
////// LETS GET SOME THINGS IF IS DESKTOP 
var $desktop_load = 0;
    if (windowsize >= 768) {
    if (!$desktop_load) {

            // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
            $.getScript("js/desktop.js", function() { 
            $desktop_load = 1;
    });

    } else {
    }
    }
////// LETS GET SOME THINGS IF IS MOBILE
    if (windowsize < 768) { 
    } 
}
checkWidth();

function allcheckWidth () {
var windowsize = $window.width();
//// IF WINDOW SIZE LOADS < 768 THEN CHANGES >= 768 LOAD ONCE
var $desktop_load = 0;
    if (!$desktop_load) {
    if (windowsize < 768) {
            if ( $(window).width() >= 768) { 

        $.getScript("js/desktop.js", function() { 
            $desktop_load = 1;
        });

            }
    }   
        }

}
$(window).resize(allcheckWidth);

Now im using something like this which makes more sense?

$(function() {   
    $(window).resize(function() {
var $desktop_load = 0;
    //Dekstop
    if (window.innerWidth >= 768) {
    if (!$desktop_load) {
            // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
            $.getScript("js/desktop.js", function() { 
            $desktop_load + 1;
    });
    } else {
    }
    }
if (window.innerWidth < 768) {
    if (window.innerWidth >= 768) {
    if (!$desktop_load) {
                // GET DESKTOP SCRIPT TO KEEP THINGS QUICK
                $.getScript("js/desktop.js", function() { 
        $desktop_load + 1;
        });
    } else {
        }
    }
    }
    }) .resize(); // trigger resize event
})

Ty for future response.

Edit - To give an example, in desktop.js i have a gif that loads before "abc" content, that gets inserted by .load(). On resize this gif will show up and the .load() in desktop.js will fire again. So if getScript was only being called once, it should not be doing anything again in desktop.js. Confusing?

回答1:

I'll just copy my answer from the jQuery documentation:

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup():
$.ajaxSetup({
  cache: true
});

If you make the browser cache the retrieved script, it should'nt be an issue, but to make sure it does not get a script that it has already gotten you can just set a flag:

$(function() {   
    var gotscript=false;
    $(window).resize(function() {
        if (window.innerWidth >= 768) {
            if (!gotscript) {
                $.getScript("js/desktop.js", function() { 
                    gotscript=true;
                });
            }
        }
        if (window.innerWidth < 768) {
            if (window.innerWidth >= 768) {
                if (!gotscript) {
                    $.getScript("js/desktop.js", function() { 
                        gotscript=true;
                    });
                }
            }
        }
    }).resize(); // trigger resize event
});

As you see the initial state of the flag must be set OUTSIDE the resize event!