☰

Greasy Fork 还支持 简体中文。

Lazyload Unveil

load images on scroll. Universal img tags. lol@greasyfork for not letting me call to github

  1. // ==UserScript==
  2. // @name       Lazyload Unveil
  3. // @version    2.0
  4. // @description  load images on scroll. Universal img tags. lol@greasyfork for not letting me call to github
  5. // @match       http://*/*
  6. // @match       https://*/*
  7. // @require http://code.jquery.com/jquery-latest.min.js
  8. // @copyright  some dude on the internet, compiled to greasyfork by zingy
  9. // @namespace https://greasyfork.org/users/2698
  10. // ==/UserScript==
  11.  
  12. /**
  13.  * jQuery Unveil
  14.  * A very lightweight jQuery plugin to lazy load images
  15.  * http://luis-almeida.github.com/unveil
  16.  *
  17.  * Licensed under the MIT license.
  18.  * Copyright 2013 Luís Almeida
  19.  * https://github.com/luis-almeida
  20.  */
  21.  
  22. ;(function($) {
  23.  
  24.   $.fn.unveil = function(threshold, callback) {
  25.  
  26.     var $w = $(window),
  27.         th = threshold || 0,
  28.         retina = window.devicePixelRatio > 1,
  29.         attrib = retina? "data-src-retina" : "data-src",
  30.         images = this,
  31.         loaded;
  32.  
  33.     this.one("unveil", function() {
  34.       var source = this.getAttribute(attrib);
  35.       source = source || this.getAttribute("data-src");
  36.       if (source) {
  37.         this.setAttribute("src", source);
  38.         if (typeof callback === "function") callback.call(this);
  39.       }
  40.     });
  41.  
  42.     function unveil() {
  43.       var inview = images.filter(function() {
  44.         var $e = $(this);
  45.         if ($e.is(":hidden")) return;
  46.  
  47.         var wt = $w.scrollTop(),
  48.             wb = wt + $w.height(),
  49.             et = $e.offset().top,
  50.             eb = et + $e.height();
  51.  
  52.         return eb >= wt - th && et <= wb + th;
  53.       });
  54.  
  55.       loaded = inview.trigger("unveil");
  56.       images = images.not(loaded);
  57.     }
  58.  
  59.     $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
  60.  
  61.     unveil();
  62.  
  63.     return this;
  64.  
  65.   };
  66.  
  67. })(window.jQuery || window.Zepto);
  68. $(document).ready(function() {
  69.   $("img").unveil();
  70. });