event - Uso del redimensionamiento de getScript si está por encima de x píxeles(jQuery)

window resize javascript

Question

Entonces tengo un problema con este script. Básicamente está cargando el script en cualquier evento de cambio de tamaño.

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)

Estupendo. Funciona bien

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)

Necesito que solo obtenga el script una vez. He usado algún código de aquí

jQuery: ¿Cómo detectar ancho de ventana sobre la marcha?

(edit - encontré esto, que tiene el mismo problema de cargar un script una vez).

Problema con la función dentro de $ (ventana) .resize - usando jQuery Y otros perdí los enlaces a: /

Cuando encontré por primera vez este problema, estaba usando algo como esto, luego agregué el allcheckWidth () para resolver el problema. Pero no es así

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);

¿Ahora estoy usando algo como esto que tiene más sentido?

$(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 para respuesta futura.

Editar - Para dar un ejemplo, en desktop.js tengo un gif que se carga antes del contenido "abc", que se inserta por .load (). Al cambiar el tamaño, se mostrará este archivo .gif y se cargará .load () en desktop.js nuevamente. Entonces, si getScript solo se llama una vez, no debería estar haciendo nada nuevamente en desktop.js. ¿Confuso?

Answer 1

Copiaré mi respuesta de la documentación de jQuery:

De forma predeterminada, $.getScript() establece la configuración de la memoria caché en falso. Esto agrega un parámetro de consulta con marcas de tiempo a la URL de la solicitud para garantizar que el navegador descargue la secuencia de comandos cada vez que se solicite. Puede anular esta característica configurando la propiedad de caché globalmente usando $.ajaxSetup():

$.ajaxSetup({
  cache: true
});

Si convierte la memoria caché del navegador en la secuencia de comandos recuperada, no debería ser un problema, pero para asegurarse de que no obtiene una secuencia de comandos que ya ha recibido, puede establecer una marca:

$(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
});

Como puede ver, el estado inicial de la bandera debe establecerse FUERA del evento de cambio de tamaño.

Answer 2

Así que resolví el problema anoche. Lo respondí en otra pregunta

aquí https://.com/a/11400128/1065573