Фрагмент кода для переключения фонового изображения с использованием Backstretch.js и Underscore.js . Полезно, если вам нужно показать другое фоновое изображение для рабочего стола и мобильного телефона. Я просто использую underscore.js для debounce при изменении размера окна, это не существенно.
* умный захват изменения размера окна
* выберите правильное изображение для загрузки в ширину браузера
* переключать изображение bg, когда размер браузера меньше 640 (мобильные телефоны)
/* ========================================================================== Update Background Image using Backstretch.js and Underscore.js ========================================================================== */ (function($,W,D,undefined) { var JQUERY4U = {}; JQUERY4U.BG = { cache: {}, init: function() { // Create the listener function (debounce). var updateBgImage = _.debounce(function(e) { console.log('updateBgImage....'); //switch to mobile version background for lower res devices. var bgImage = (window.innerWidth > 640) ? "/img/home-bg.jpg" : "/img/home-bg-mobile.jpg"; /* backstretch responsive bg image */ $.backstretch([ bgImage ], { centeredY: false }); }, 500); // Maximum run of once per 500 milliseconds //detect actions on window resize $(window).on("resize", function() { updateBgImage(); }); //init bg image updateBgImage(); } } $(function() { JQUERY4U.BG.init(); }); })(jQuery, window, document);