CODEWITHSUNDEEP
jquery
User2893
User2893

Reputation: 119

Intersection Observer API is not available

I developed a website with infinite Scrolling. My webpage load the content with that technology in google chrome. But When load and scrolling the webpage in Internet explore, It display an error "Intersection Observer API is not available". How to fix the issue?

Here is my code

(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.$);

Upvotes: 2

Views: 4364

Answers (4)

Ewomazino Ukah
Ewomazino Ukah

Reputation: 2366

I used this package in my own case https://www.npmjs.com/package/intersection-observer

then use as so: import 'intersection-observer'

Upvotes: 0

Leon Revill
Leon Revill

Reputation: 2020

I'd recommend using the polyfill.io service. If you include the following code in your page:

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

It will automatically ship the required polyfill based on the browser. So if a user is on Chrome which doesn't need the polyfill it won't even ship those bytes to the browser.

Upvotes: 1

philipp
philipp

Reputation: 16515

But When load and scrolling the webpage in Internet explore

The reason seams to be simple to find, but probably difficult to fix: 

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

Means that the browser does not support the IntersectionObserver. In other words: the code will most likely only work in the browsers listed here

As mentioned in the answer of @cloned, it should be easy to fix, if you include the polyfill.

Upvotes: 1

cloned
cloned

Reputation: 6742

Internet Explorer doesn't support Intersection Observer.

Luckily W3C provides a polyfill that you can use. https://github.com/w3c/IntersectionObserver/tree/master/polyfill

With this you can continue to use the Intersection Observer as usual and older browsers will instead use events bound to the scroll event (not as performant as native Intersection Observer)

Upvotes: 2

Related Questions