javascript - 网站 javascript 中的完整背景

Question

您好，我的主页上有一个网站加载背景图像而不是网站末尾。

我正在 Google Chrome 中对此进行测试。

这是我的问题:

这是我的网站:

http://www.behringer-mauch.de/Tischler_Hehmann/index.php?article_id=12

在另一个网站上，从主页加载背景图片到网站末尾。

例子:

http://www.behringer-mauch.de/Tischler_Hehmann/index.php?article_id=7

我不知道是什么问题:(

我希望有人能帮助我。

这是javascript代码:

    /*!
 * jQuery.BgSwitcher
 *
 * @version  0.4.2
 * @author   rewish <rewish.org@gmail.com>
 * @license  MIT License (https://github.com/rewish/jquery-bgswitcher/blob/master/LICENSE.md)
 * @link     https://github.com/rewish/jquery-bgswitcher
 */
(function($) {
    'use strict';

    var loadedImages = {},

        slice = Array.prototype.slice,
        toString = Object.prototype.toString,

        edges = ['Top', 'Right', 'Bottom', 'Left'],
        backgroundProperties = [
            'Attachment', 'Color', 'Image', 'Repeat',
            'Position', 'Size', 'Clip', 'Origin'
        ];

    $.fn.bgswitcher = function() {
        var args = arguments,
            instanceKey = BgSwitcher.keys.instance;

        return this.each(function() {
            var instance = $.data(this, instanceKey);

            if (!instance) {
                instance = new BgSwitcher(this);
                $.data(this, instanceKey, instance);
            }

            instance.dispatch.apply(instance, args);
        });
    };

    // Backward Compatibility
    $.fn.bgSwitcher = $.fn.bgswitcher;

    /**
     * BgSwitcher
     *
     * @param {HTMLElement} el
     * @constructor
     */
    function BgSwitcher(el) {
        this.$el = $(el);
        this.index = 0;
        this.config = $.extend({}, BgSwitcher.defaultConfig);

        this._setupBackgroundElement();
        this._listenToResize();
    }

    $.extend(BgSwitcher.prototype, {
        /**
         * Dispatch
         *
         * @param {string|Array} one
         */
        dispatch: function(one) {
            switch (toString.call(one)) {
                case '[object Object]':
                    this.setConfig(one);
                    break;
                case '[object String]':
                    this[one].apply(this, slice.call(arguments, 1));
                    break;
                default:
                    throw new Error('Please specify a Object or String');
            }
        },

        /**
         * Set config
         *
         * @param {Object} config
         */
        setConfig: function(config) {
            this.config = $.extend(this.config, config);

            if (typeof this.config.random !== 'undefined') {
                this.config.shuffle = this.config.random;
            }

            this._prepare();
        },

        /**
         * Set images
         *
         * @param {Array} images
         */
        setImages: function(images) {
            this.imageList = new this.constructor.ImageList(images);

            if (this.config.shuffle) {
                this.imageList.shuffle();
            }
        },

        /**
         * Set switch handler
         *
         * @param {Function} fn
         */
        setSwitchHandler: function(fn) {
            this.switchHandler = $.proxy(fn, this);
        },

        /**
         * Default switch handler
         *
         * @param {string} type
         * @returns {Function}
         */
        getBuiltInSwitchHandler: function(type) {
            return this.constructor.switchHandlers[type || this.config.effect];
        },

        /**
         * Adjust rectangle
         */
        adjustRectangle: function() {
            var edge,
                i = 0,
                length = edges.length,
                offset = this.$el.position(),
                copiedStyles = {
                    top: offset.top,
                    left: offset.left,
                    width: this.$el.innerWidth(),
                    height: this.$el.innerHeight()
                };

            for (; i < length; i++) {
                edge = edges[i];
                copiedStyles['margin' + edge] = this.$el.css('margin' + edge);
                copiedStyles['border' + edge] = this.$el.css('border' + edge);
            }

            this.$bg.css(copiedStyles);
        },

        /**
         * Start switching
         */
        start: function() {
            if (!this._timerID) {
                this._timerID = setTimeout($.proxy(this, 'next'), this.config.interval);
            }
        },

        /**
         * Stop switching
         */
        stop: function() {
            if (this._timerID) {
                clearTimeout(this._timerID);
                this._timerID = null;
            }
        },

        /**
         * Toggle between start/stop
         */
        toggle: function() {
            if (this._timerID) {
                this.stop();
            } else {
                this.start();
            }
        },

        /**
         * Reset switching
         */
        reset: function() {
            this.index = 0;
            this._prepareSwitching();
        },

        /**
         * Go to next switching
         */
        next: function() {
            var max = this.imageList.count();

            if (!this.config.loop && this.index + 1 === max) {
                return;
            }

            if (++this.index === max) {
                this.index = 0;
            }

            this.switching();
        },

        /**
         * Go to previous switching
         */
        prev: function() {
            if (!this.config.loop && this.index === 0) {
                return;
            }

            if (--this.index === -1) {
                this.index = this.imageList.count() - 1;
            }

            this.switching();
        },

        /**
         * Select the switching at index
         *
         * @param {number} index
         */
        select: function(index) {
            if (index === -1) {
                index = this.imageList.count() - 1;
            }

            this.index = index;
            this.switching();
        },

        /**
         * Switching the background image
         */
        switching: function() {
            var started = !!this._timerID;

            if (started) {
                this.stop();
            }

            this._createSwitchableElement();
            this._prepareSwitching();
            this.switchHandler(this.$switchable);

            if (started) {
                this.start();
            }
        },

        /**
         * Destroy...
         */
        destroy: function() {
            this.stop();
            this._stopListeningToResize();

            if (this.$switchable) {
                this.$switchable.stop();
                this.$switchable.remove();
                this.$switchable = null;
            }

            if (this.$bg) {
                this.$bg.remove();
                this.$bg = null;
            }

            this.$el.removeAttr('style');
            this.$el.removeData(this.constructor.keys.instance);
            this.$el = null;
        },

        /**
         * Prepare
         */
        _prepare: function() {
            this.setImages(this.config.images);
            this.setSwitchHandler(this.getBuiltInSwitchHandler());
            this._prepareSwitching();

            if (this.config.start) {
                this.start();
            }
        },

        /**
         * Setup background element
         */
        _setupBackgroundElement: function() {
            this.$bg = $(document.createElement('div'));
            this.$bg.css({

                position: 'absolute',
                paddingBottom: '0px',
                backgroundattachment: 'fixed!important',
                zIndex: (parseInt(this.$el.css('zIndex'), 10) || 0) - 1,
                overflow: 'hidden'

            });

            this._copyBackgroundStyles();
            this.adjustRectangle();

            if (this.$el[0].tagName === 'BODY') {
                this.$el.prepend(this.$bg);
            } else {
                this.$el.before(this.$bg);
                this.$el.css('background', 'none');
            }
        },

        /**
         * Create switchable element
         */
        _createSwitchableElement: function() {
            if (this.$switchable) {
                this.$switchable.remove();
            }

            this.$switchable = this.$bg.clone();
            this.$switchable.css({top: 0, left: 0, margin: 0, border: 'none'});
            this.$switchable.appendTo(this.$bg);
        },

        /**
         * Copy background styles
         */
        _copyBackgroundStyles: function () {
            var prop,
                copiedStyle = {},
                length = backgroundProperties.length,
                i = 0;

            for (; i < length; i++) {
                prop = 'background' + backgroundProperties[i];
                copiedStyle[prop] = this.$el.css(prop);
            }

            this.$bg.css(copiedStyle);
        },

        /**
         * Listen to the resize event
         */
        _listenToResize: function() {
            var that = this;
            this._resizeHandler = function() {
                that.adjustRectangle();
            };
            $(window).on('resize', this._resizeHandler);
        },

        /**
         * Stop listening to the resize event
         */
        _stopListeningToResize: function() {
            $(window).off('resize', this._resizeHandler);
            this._resizeHandler = null;
        },

        /**
         * Prepare to switching the background image
         */
        _prepareSwitching: function() {
            this.$bg.css('backgroundImage', this.imageList.url(this.index));
        }
    });

    /**
     * Data Keys
     * @type {Object}
     */
    BgSwitcher.keys = {
        instance: 'bgSwitcher'
    };

    /**
     * Default Config
     * @type {Object}
     */
    BgSwitcher.defaultConfig = {
        images: [],
        interval: 5000,
        start: true,
        loop: true,
        shuffle: false,
        effect: 'fade',
        duration: 1000,
        easing: 'swing'
    };

    /**
     * Built-In switch handlers (effects)
     * @type {Object}
     */
    BgSwitcher.switchHandlers = {
        fade: function($el) {
            $el.animate({opacity: 0}, this.config.duration, this.config.easing);
        },

        blind: function($el) {
            $el.animate({height: 0}, this.config.duration, this.config.easing);
        },

        clip: function($el) {
            $el.animate({
                top: parseInt($el.css('top'), 10) + $el.height() / 2,
                height: 0
            }, this.config.duration, this.config.easing);
        },

        slide: function($el) {
            $el.animate({top: -$el.height()}, this.config.duration, this.config.easing);
        },

        drop: function($el) {
            $el.animate({
                left: -$el.width(),
                opacity: 0
            }, this.config.duration, this.config.easing);
        },

        hide: function($el) {
            $el.hide();
        }
    };

    /**
     * Define effect
     *
     * @param {String} name
     * @param {Function} fn
     */
    BgSwitcher.defineEffect = function(name, fn) {
        this.switchHandlers[name] = fn;
    };

    /**
     * BgSwitcher.ImageList
     *
     * @param {Array} images
     * @constructor
     */
    BgSwitcher.ImageList = function(images) {
        this.images = images;
        this.createImagesBySequence();
        this.preload();
    };

    $.extend(BgSwitcher.ImageList.prototype, {
        /**
         * Images is sequenceable
         *
         * @returns {boolean}
         */
        isSequenceable: function() {
            return typeof this.images[0] === 'string' &&
                typeof this.images[1] === 'number' &&
                typeof this.images[2] === 'number';
        },

        /**
         * Create an images by sequence
         */
        createImagesBySequence: function() {
            if (!this.isSequenceable()) {
                return;
            }

            var images = [],
                base = this.images[0],
                min = this.images[1],
                max = this.images[2];

            do {
                images.push(base.replace(/\.\w+$/, min + '$&'));
            } while (++min <= max);

            this.images = images;
        },

        /**
         * Preload an images
         */
        preload: function() {
            var path,
                length = this.images.length,
                i = 0;

            for (; i < length; i++) {
                path = this.images[i];
                if (!loadedImages[path]) {
                    loadedImages[path] = new Image();
                    loadedImages[path].src = path;
                }
            }
        },

        /**
         * Shuffle an images
         */
        shuffle: function() {
            var j, t,
                i = this.images.length,
                original = this.images.join();

            if (!i) {
                return;
            }

            while (i) {
                j = Math.floor(Math.random() * i);
                t = this.images[--i];
                this.images[i] = this.images[j];
                this.images[j] = t;
            }

            if (this.images.join() === original) {
                this.shuffle();
            }
        },

        /**
         * Get the image from index
         *
         * @param {number} index
         * @returns {string}
         */
        get: function(index) {
            return this.images[index];
        },

        /**
         * Get the URL with function of CSS
         *
         * @param {number} index
         * @returns {string}
         */
        url: function(index) {
            return 'url(' + this.get(index) + ')';
        },

        /**
         * Count of images
         *
         * @returns {number}
         */
        count: function() {
            return this.images.length;
        }
    });

    $.BgSwitcher = BgSwitcher;
}(jQuery));

Answer 1

问题是您要将背景图像添加到一个 <div>还有另一个 <div>在标记之后:

<div style='background-image...'>...</div>
<div id='wrapper'>...</div>

看起来您的 JavaScript 试图显式设置第一个 <div> 的高度以匹配整个页面的高度，但它在浏览器有机会应用所有 CSS 规则之前计算该高度，因此它得到了错误的答案。

我不确定您为什么要使用如此复杂的方法。在 <div> 上简单地设置背景图像会容易得多包含内容，或至少包含 <div> 的父级

---

其他更新

一个问题是您在 document.ready 上运行脚本事件。该事件在浏览器充分解析标记以构建 DOM 时触发，但之前它已将任何样式应用到该标记。这就是计算出的高度不正确的原因之一。 (不过，正如其他评论者指出的那样，有时浏览器 足够快。不过它并不可靠。)

第一步是从 document.ready 切换至 window.onload .加载事件在浏览器加载完所有内容(包括样式表和图像)后触发。只要您的 JavaScript 没有做任何修改高度的事情，该更改就足以让脚本计算背景的正确高度 <div> .但是，如果您的 JavaScript(包括外部库)正在做一些可能会改变高度的事情，您也必须等到它完成。

Having said that, though, the markup and approach is really pretty bad. If you've actually paid someone for this, I'd be looking to get my money back.