使用Backstretch.js切换背景图片

最新推荐文章于 2020-07-09 20:42:15 发布

dingshi7798

最新推荐文章于 2020-07-09 20:42:15 发布

阅读量187

点赞数

文章标签： javascript ViewUI

使用Backstretch.js和Underscore.js切换背景图像的代码段。如果您需要为台式机和移动设备显示不同的背景图像，则很有用。我只是使用underscore.js进行窗口大小调整事件的去抖动，这不是必需的。

*智能窗口调整大小捕获
*选择正确的背景图片以加载浏览器宽度
*当浏览器调整为小于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);

From: https://www.sitepoint.com/switch-background-image-backstretch-js/