Using resize to getScript if above x pixels (jQuery)
- by user1065573
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?
