如何禁用响应式设计的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://sofzh.miximages.com/javascript/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, {image : 'http://sofzh.miximages.com/javascript/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://sofzh.miximages.com/javascript/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, {image : 'http://sofzh.miximages.com/javascript/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://sofzh.miximages.com/javascript/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, {image : 'http://sofzh.miximages.com/javascript/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://sofzh.miximages.com/javascript/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, {image : 'http://sofzh.miximages.com/javascript/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://sofzh.miximages.com/javascript/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, {image : 'http://sofzh.miximages.com/javascript/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://sofzh.miximages.com/javascript/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, {image : 'http://sofzh.miximages.com/javascript/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://sofzh.miximages.com/javascript/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, {image : 'http://sofzh.miximages.com/javascript/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://sofzh.miximages.com/javascript/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, {image : 'http://sofzh.miximages.com/javascript/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://sofzh.miximages.com/javascript/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作为display：none
这是不好的做法，因为它仍然会运行脚本，是否最好以某种方式禁用它？
正如其他人提到的，你可以使用大量的jQuery插件。 但是，如果你想要使用的只是简单的vanilla jQuery，你也可以做你想要的。
您可以在jquery中使用resize方法来检测窗口的大小。
$(window).resize(function() { if ($(this).width() > 480) { // call supersize method } });
然后在doc ready上，只需确保调用resize窗口，以便它最初调用或不调用方法，具体取决于窗口的当前大小：
$(document).ready(function() { $(window).resize(); });
PS>如果每次窗口resize时都不需要运行此脚本，而只是当它达到480像素以下时，可以在需要禁用或启用脚本后对绑定resize方法进行轻微修改。
您可以使用screen.width检测屏幕宽度，然后从那里确定您要执行的操作。
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 }
在屏幕尺寸小于480的情况下，将所有动画和您不想在else块内运行的所有代码包裹起来。
需要注意的是，IE往往会做不同的事情，我没有IE测试，所以你可能想在那里运行screen.width并根据需要调整任何差异。 但在Chrome中，screen.width返回1280，这是我的屏幕的正确宽度。
您可以在媒体查询中设置一个带有一些css规则的隐藏div，然后使用jQuery的css()检查这些css属性，并根据该幻灯片打开或关闭幻灯片。 特别：
@media all and (max-width: 480px) { #testdiv{ display:none; } }
并且js：
if($("#testdiv").css("display") == "none"){ $.supersized({...}); }
请注意，这实际上是使用Modernizr方法而不实际获取库。
jRespond，Viget发布的脚本允许您根据视口大小控制JavaScript：
文章： http ： //viget.com/inspire/managing-javascript-on-responsive-websites
代码： https ： //github.com/ten1seven/jRespond
正如@Pointy在评论中指出的那样，modernizr允许您通过javascript调用媒体查询。 阅读modernizr文档
我认为Asad的解决方案是最好的，或者你使用的是现代化的。 因为在单个文件中有断点定义（480px），而在JS和CSS中没有。 如果使用SCSS，则变量中只有一个断点定义。