如何禁用javascript进行响应性设计

我一直在使用超大jQuery作为我网站的幻灯片背景。我正在使网站响应和使用css媒体查询

我想能够禁用脚本时，它是低于480px

下面是实际滑块背景的脚本

$(document).ready(function(){

         jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   0,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   3000,       // Length between transitions
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                                                    {image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

我想我可以通过简单地使用css来实现这一点，例如在我的媒体查询中，只需将#supersized as display:none

---

这是一种糟糕的做法，因为它仍然会运行脚本，并且最好以某种方式禁用它吗？

jRespond，Viget发布的脚本允许您根据视口大小控制JavaScript：

第条：

---

代码：

您可以在媒体查询中使用一些css规则设置隐藏的div，然后使用jQuery的css（）检查这些css属性，并根据这些属性打开或关闭幻灯片。具体而言：

@media all and (max-width: 480px) {
    #testdiv{
        display:none;
    }
}

和js：

if($("#testdiv").css("display") == "none"){
    $.supersized({...});
}

---

请注意，这实际上是使用Modernizer方法，而没有实际获取库。

正如@Pointy在注释中所指出的，Modernizer允许您从javascript调用媒体查询。阅读

您可以使用screen.width通过JavaScript检测屏幕宽度，然后确定要从那里执行的操作

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

if（screen.width<480）{
//在这里做任何事情，或者什么都不做
返回；
}否则{
//在这里为更大的屏幕做你所有的酷东西
}

对于屏幕大小小于480的情况，将所有动画和所有不希望在else块中运行的代码包装起来

---

作为警告，IE倾向于做不同的事情，我没有IE需要测试，所以您可能需要运行screen.width，并根据任何差异进行调整（如有必要）。但是在Chrome中，screen.width返回1280，这是我的屏幕的正确宽度。

正如其他人提到的，有很多jQuery插件可以使用。然而，如果您只想使用普通的jQuery，那么您也可以做您想做的事情

您可以使用jquery中的resize方法来检测窗口的大小

$(window).resize(function() {
   if ($(this).width() > 480) {
      // call supersize method
   }
});

然后在doc ready上，确保调用resize（调整大小）窗口，使其根据窗口的当前大小最初调用或不调用该方法：

$(document).ready(function() {
   $(window).resize();
});

---

PS>如果您不需要每次调整窗口大小时都运行此脚本，而是仅当窗口大小达到480像素以下时才运行此脚本，则在需要禁用或启用脚本后，可以稍微修改以取消绑定调整大小方法。

我认为Asad的解决方案是最好的，或者您使用Modernizer。 因为断点定义（480px）在单个文件中，而不是在JS和CSS中。

---

如果使用SCSS，则变量中的断点只有一个定义。

可以使用Modernizer从JavaScript进行媒体查询。您只需测试窗口是否大于480px$（document）.ready（函数（）{if（$（window）.width（）>480）{//这里是您的代码//}）；这是可行的，但如果您决定将此功能改为500px，则需要更新mediaquery和javascript。使用此选项，您只需更新mediaquery即可