0

所以我对这个脚本有疑问。它基本上是在任何调整大小事件上加载脚本。

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

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

$(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 以备将来响应。

编辑-举个例子，在desktop.js中，我有一个在“abc”内容之前加载的gif，由.load（）插入。调整大小时，此 gif 将显示，并且 desktop.js 中的 .load() 将再次触发。因此，如果 getScript 只被调用一次，它不应该在 desktop.js 中再次执行任何操作。令人困惑？

4

2 回答 2

0

我将从 jQuery 文档中复制我的答案：

默认情况下，$.getScript()将缓存设置设置为 false。这会将时间戳查询参数附加到请求 URL，以确保浏览器在每次请求时下载脚本。您可以通过使用全局设置缓存属性来覆盖此功能 $.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
});

如您所见，标志的初始状态必须设置在调整大小事件之外！

于 2012-07-09T02:28:54.157 回答
0

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

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

于 2012-07-09T17:39:09.360 回答