☰

Behance - fetch lazy-load images immediately

Fetch lazy-load images immediately at document load

As of 2015-04-27. See the latest version.

  1. // ==UserScript==
  2. // @name        Behance - fetch lazy-load images immediately
  3. // @description Fetch lazy-load images immediately at document load
  4. // @include     https://www.behance.net/*
  5. // @version     1.0.4
  6. // @namespace   wOxxOm.scripts
  7. // @author      wOxxOm
  8. // @run-at      document-start
  9. // ==/UserScript==
  10.  
  11. window.addEventListener('DOMContentLoaded', function(e) {
  12.   processNodes(null, document.querySelectorAll('.js-picture-lazy'));
  13.   setMutationHandler(document.body, '.js-picture-lazy', processNodes);
  14. });
  15.  
  16. function processNodes(observer, nodes) {
  17.   for (var i=0, len=nodes.length, n, img; i<len && (n=nodes[i]); i++) {
  18.     if (img = n.querySelector('img')) {
  19.       img.src = img.dataset.src;
  20.       img.removeAttribute('width');
  21.       img.removeAttribute('height');
  22.       img.removeAttribute('style');
  23.     }
  24.     var picture = document.createElement('picture');
  25.     while (n.firstElementChild)
  26.       picture.appendChild(n.removeChild(n.firstElementChild));
  27.     n.parentNode.replaceChild(picture, n);
  28.     n.remove();
  29.   }
  30. }
  31.  
  32. function setMutationHandler(baseNode, selector, cb) {
  33.   var ob = new MutationObserver(function(mutations){
  34.     for (var i=0, ml=mutations.length, m; (i<ml) && (m=mutations[i]); i++)
  35.       for (var j=0, nodes=m.addedNodes, nl=nodes.length, n; (j<nl) && (n=nodes[j]); j++)
  36.         if (n.nodeType == 1) 
  37.           if ((n = n.matches(selector) ? [n] : n.querySelectorAll(selector)) && n.length)
  38.             if (!cb(ob, n))
  39.               return;
  40.   });
  41.   ob.observe(baseNode, {subtree:true, childList:true}); 
  42. }