LazyWiki using InterSectionObserver

1. Home
2. Drafts
3. LazyWiki using InterSectionObserver

Edit

LazyWiki using InterSectionObserver

For the js code, see MediaWiki:Common.js

[edit: not added ]

/* Lazy loading */
var callback = function(entries, observer) {
    entries.forEach(function(entry){
        if (entry.isIntersecting) {
            var tofetch = entry.target.getAttribute('data-fetch');
            var params = {
                action: 'parse',
                text: tofetch,
                contentmodel: 'wikitext',
                format: 'json'
              },
             api = new mw.Api();
             api.post( params ).done( function ( data ) {
                console.log(data.parse.text['*']);
                entry.target.innerHTML = data.parse.text['*'];
                observer.unobserve(entry.target);
              } )
              .fail( function (data){
                console.log('fail', data);
                entry.target.innerHTML = data+' error';
             });
            }
    });
};

var options = {
  root: document,
  rootMargin: '0px',
  threshold: 1.0
};

var observer = new IntersectionObserver(callback, options);
$('document').ready(function(){
      document.querySelectorAll('[data-fetch]').forEach(function(target){
          observer.observe(target);
       });
});

Example: fetch code

<div data-fetch="{{#widget:Link
|type=button
|text=Fetched this when visible
|hrefsurround=#
|class=btn btn-warning}}">
</div>

Same but add BS spinner

      Loading...

Now with some interaction in WSForm

click to fetch