如果大于x像素(jQuery),则使用resize to getScript

所以这个脚本有问题。 它基本上是在任何resize事件上加载脚本。

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) 

大。 工作正常。

 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) 

我需要它只能获得一次脚本。 我从这里使用了一些代码

jQuery:如何快速检测窗口宽度?

(编辑 – 我发现了这个,他有一个加载脚本的问题。)

$(window).resize中的函数问题 – 使用jQuery和其他我丢失了链接:

当我第一次发现这个问题时,我正在使用这样的东西,然后我添加了allcheckWidth()来解决问题。 但事实并非如此。

 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 LOAD ONCE var $desktop_load = 0; if (!$desktop_load) { if (windowsize = 768) { $.getScript("js/desktop.js", function() { $desktop_load = 1; }); } } } } $(window).resize(allcheckWidth); 

现在我使用这样的东西更有意义吗?

 $(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 (!$desktop_load) { // GET DESKTOP SCRIPT TO KEEP THINGS QUICK $.getScript("js/desktop.js", function() { $desktop_load + 1; }); } else { } } } }) .resize(); // trigger resize event }) 

Ty将来的回应。

编辑 – 举个例子,在desktop.js中我有一个在“abc”内容之前加载的gif,它由.load()插入。 在resize时,将显示此gif,并且desktop.js中的.load()将再次触发。 因此,如果只调用一次getScript,那么它应该不再在desktop.js中执行任何操作。 混乱?

我只是从jQuery文档中复制我的答案:

默认情况下, $.getScript()将缓存设置设置为false。 这会将带时间戳的查询参数附加到请求URL,以确保浏览器在每次请求时都下载脚本。 您可以通过使用$.ajaxSetup():全局设置缓存属性来覆盖此function$.ajaxSetup():

 $.ajaxSetup({ cache: true }); 

如果你让浏览器缓存检索到的脚本,那应该不是问题,但为了确保它没有得到它已经获得的脚本,你可以设置一个标志:

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

如您所见,标志的初始状态必须设置为OUTSIDE resize事件!

所以我昨晚解决了这个问题。 我在另一个问题上回答了

这里https://stackoverflow.com/a/11400128/1065573