lazyload - preload смежные изображения

Question

В настоящее время я настраиваю тему wordpess, которую я купил, которая использует функцию lazyload в своих галереях изображений.

Как и сейчас, функция lazyload загружает только видимое изображение (которое затем кэшируется). Смежные изображения скрыты снизу и будут загружаться только после того, как они станут видимыми, щелкнув NEXT/PREVIOUS через галерею.

В результате получается, что sceen пробегает пробел между изображениями, что кажется довольно неудобным. Как только изображения кэшируются, весь процесс NEXT/PREVIOUS выглядит намного более свободно.

Кто-нибудь знает, есть ли способ настроить следующий код lazyload таким образом, чтобы он предварительно загружал не только текущее, но и следующее и предыдущее изображение заранее? Возможно ли это в этой части кода?

Я пытался найти путь сам на некоторое время теперь, но не мог решить ее ...

Пожалуйста, простите ужасное форматирование, это на самом деле, как файл был доставлен с темой. EDIT: переформатирован код для лучшей читаемости.

/* 
* Lazy Load - jQuery plugin for lazy loading images 
* 
* Copyright (c) 2007-2012 Mika Tuupola 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Project home: 
* http://www.appelsiini.net/projects/lazyload 
* 
* Version: 1.8.0 
* 
*/ 
(function(a, b) { 
    var c = a(b); 
    a.fn.lazyload = function(d) { 
     function h() { 
      var b = 0; 
      e.each(function() { 
       var c = a(this); 
       if (g.skip_invisible && !c.is(":visible")) return; 
       if (!a.abovethetop(this, g) && !a.leftofbegin(this, g)) 
        if (!a.belowthefold(this, g) && !a.rightoffold(this, g)) c.trigger("appear"); 
        else if (++b > g.failure_limit) return !1 
      }) 
     } 
     var e = this, 
      f, g = { 
       threshold: 0, 
       failure_limit: 0, 
       event: "scroll", 
       effect: "show", 
       container: b, 
       data_attribute: "original", 
       skip_invisible: !0, 
       appear: null, 
       load: null 
      }; 
     return d && (undefined !== d.failurelimit && (d.failure_limit = d.failurelimit, delete d.failurelimit), undefined !== d.effectspeed && (d.effect_speed = d.effectspeed, delete d.effectspeed), a.extend(g, d)), f = g.container === undefined || g.container === b ? c : a(g.container), 0 === g.event.indexOf("scroll") && f.bind(g.event, function(a) { 
      return h() 
     }), this.each(function() { 
      var b = this, 
       c = a(b); 
      b.loaded = !1, c.one("appear", function() { 
       if (!this.loaded) { 
        if (g.appear) { 
         var d = e.length; 
         g.appear.call(b, d, g) 
        } 
        a("<img />").bind("load", function() { 
         c.hide().attr("src", c.data(g.data_attribute))[g.effect](g.effect_speed), b.loaded = !0; 
         var d = a.grep(e, function(a) { 
          return !a.loaded 
         }); 
         e = a(d); 
         if (g.load) { 
          var f = e.length; 
          g.load.call(b, f, g) 
         } 
        }).attr("src", c.data(g.data_attribute)) 
       } 
      }), 0 !== g.event.indexOf("scroll") && c.bind(g.event, function(a) { 
       b.loaded || c.trigger("appear") 
      }) 
     }), c.bind("resize", function(a) { 
      h() 
     }), h(), this 
    }, a.belowthefold = function(d, e) { 
     var f; 
     return e.container === undefined || e.container === b ? f = c.height() + c.scrollTop() : f = a(e.container).offset().top + a(e.container).height(), f <= a(d).offset().top - e.threshold 
    }, a.rightoffold = function(d, e) { 
     var f; 
     return e.container === undefined || e.container === b ? f = c.width() + c.scrollLeft() : f = a(e.container).offset().left + a(e.container).width(), f <= a(d).offset().left - e.threshold 
    }, a.abovethetop = function(d, e) { 
     var f; 
     return e.container === undefined || e.container === b ? f = c.scrollTop() : f = a(e.container).offset().top, f >= a(d).offset().top + e.threshold + a(d).height() 
    }, a.leftofbegin = function(d, e) { 
     var f; 
     return e.container === undefined || e.container === b ? f = c.scrollLeft() : f = a(e.container).offset().left, f >= a(d).offset().left + e.threshold + a(d).width() 
    }, a.inviewport = function(b, c) { 
     return !a.rightofscreen(b, c) && !a.leftofscreen(b, c) && !a.belowthefold(b, c) && !a.abovethetop(b, c) 
    }, a.extend(a.expr[":"], { 
     "below-the-fold": function(b) { 
      return a.belowthefold(b, { 
       threshold: 0 
      }) 
     }, 
     "above-the-top": function(b) { 
      return !a.belowthefold(b, { 
       threshold: 0 
      }) 
     }, 
     "right-of-screen": function(b) { 
      return a.rightoffold(b, { 
       threshold: 0 
      }) 
     }, 
     "left-of-screen": function(b) { 
      return !a.rightoffold(b, { 
       threshold: 0 
      }) 
     }, 
     "in-viewport": function(b) { 
      return !a.inviewport(b, { 
       threshold: 0 
      }) 
     }, 
     "above-the-fold": function(b) { 
      return !a.belowthefold(b, { 
       threshold: 0 
      }) 
     }, 
     "right-of-fold": function(b) { 
      return a.rightoffold(b, { 
       threshold: 0 
      }) 
     }, 
     "left-of-fold": function(b) { 
      return !a.rightoffold(b, { 
       threshold: 0 
      }) 
     } 
    }) 
})(jQuery, window) 

Answer 1

Не изменяйте библиотеки. Вместо того, чтобы инициировать событие LazyLoad

событий для запуска Загрузка Вы можете использовать JQuery событие, как click или mouseover. Вы также можете использовать пользовательские события, такие как sporty или foobar. По умолчанию следует подождать, пока пользователь не прокрутится вниз, и изображение появится в окне просмотра.

Чтобы загружать изображения только тогда, когда пользователь нажимает их, вы можете сделать:

$("img.lazy").lazyload({ 
    event : "customloadimage" 
}); 

, а затем в вашем JQuery использования $image.trigger('customloadimage'); (предполагается, что $image является JQuery Object)

Ссылки:

https://www.appelsiini.net/projects/lazyload

http://api.jquery.com/trigger/

Answer 2

Если вы используете Intersection Observer API (или плагин, который использует этот API), вы можете воспользоваться настройкой «rootMargin». Например, установив его на «800px», он будет лениво загружать изображение 800px, прежде чем он войдет в окно просмотра.