Question

我用无限滚动开发了一个网站。我的网页在Google chrome中使用该技术加载了内容。但是，当在Internet Explorer中加载并滚动网页时，它显示错误“ Intersection Observer API不可用”。如何解决该问题？

这是我的代码

(function ($) {
    $.fn.infiniteScroll = function (options) {

        var observer, filesControl = 0, settings;
        settings = $.extend({
            files: [],
            preloaderColor: "#000",
            fadeDuration: 300,
            beforeLoadNewContent: function () { },
            processData: function(data){               
                var content ='<div>'+(data)+'</div>';
                $('.' + settings.markSelector).before(content);
                $(content).fadeTo(settings.fadeDuration, 1);
            },
            afterLoadNewContent: function () { },
            onEnd: function () { }
        }, options);
        settings.markSelector;

        infiniteContentLoader = function (entry) {
            if (entry[0].isIntersecting && !$(".infiniteContentPreloader").is(":visible") && filesControl < settings.files.length) {
                $(".infiniteContentPreloader").toggle();
                $.ajax({
                    type: "GET", 
                    url:settings.files[filesControl], 
                    dataType: "html", 
                    success:function (data) {                  
                        settings.beforeLoadNewContent();
                        $(".infiniteContentPreloader").toggle();                   
                        settings.processData(data);
                        filesControl++;
                        settings.afterLoadNewContent();
                    }
                });
            } else if(entry[0].isIntersecting && !$(".infiniteContentPreloader").is(":visible") && filesControl >= settings.files.length) {
                observer.disconnect();
                settings.onEnd();
            }
        }

        infiniteScroll = function (element) {
            settings.markSelector = "infiniteContentMark_" + Date.now();
            var mark = '<div class="' + (settings.markSelector) + '" style="width:100%;"></div>';
            $(element).append(mark);

           $(document).ready(function () {
                $('.' + settings.markSelector).html('<div class="infiniteContentPreloader" style="width: 150px; height: 150px; margin: 0 auto; display: none;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml: space="preserve"><circle fill="'+ (settings.preloaderColor) + '" strok="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"></animate></circle><circle fill="'+ (settings.preloaderColor) + '" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"></animate></circle><circle fill="'+ (settings.preloaderColor) + '" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"></animate></circle></svg></div>');

                if (!('IntersectionObserver' in window)) {
                    console.log("Intersection Observer API is not available");
                } else {
                    var options = {
                        root: null,
                        rootMargin: '0px',
                        threshold: 0
                    }
                    observer = new IntersectionObserver(infiniteContentLoader, options);
                    var infiniteContentMark = $('.' + settings.markSelector).toArray()[0];
                    observer.observe(infiniteContentMark);
                }
            });
        }

        if (this.length > 0) {
            return infiniteScroll(this);
        }
    };
})(window.jQuery || window.Zepto || window.$);

Answer 1

但是在Internet浏览器中加载和滚动网页时

原因接缝很容易找到，但~~可能很难解决~~：

 if (!('IntersectionObserver' in window)) {
   console.log("Intersection Observer API is not available");
 }

表示浏览器不支持IntersectionObserver。换句话说：该代码很可能仅在here

列出的浏览器中起作用

如@cloned的答案中所述，如果包含polyfill，则应该易于修复。

Answer 2

Internet Explorer不支持交叉口观察器。

幸运的是，W3C提供了可以使用的polyfill。 https://github.com/w3c/IntersectionObserver/tree/master/polyfill

有了这个，您可以像往常一样继续使用Intersection Observer，而较旧的浏览器将使用绑定到滚动事件的事件（而不像本机Intersection Observer那样具有表现力）

Answer 3

我建议使用polyfill.io服务。如果您在页面中包含以下代码：

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

它将基于浏览器自动发送所需的polyfill。因此，如果用户使用的是Chrome，而无需使用polyfill，则它甚至不会将这些字节发送到浏览器。

无法使用Intersection Observer API

3 个答案: