Ленивая загрузка изображений не работает с лайтбоксом Smartphoto - PullRequest
Новая
       15

Ленивая загрузка изображений не работает с лайтбоксом Smartphoto

0 голосов
/ 01 сентября 2018

Ленивая загрузка изображений не работает для лайтбокса Smartphoto, который я использую.

Эта часть запускает загрузку изображения сразу вместо загрузки при достижении порога: 

<a href="https://via.placeholder.com/350x120" class="js-smartPhoto" data-caption="test" data-id="test" data-group="test"><img src="https://via.placeholder.com/10x10" class="svg" />

Есть ли способ сделать изображение внутри <a href=""> также ленивой загрузкой? 

/*! 
 * Smartphoto
 * license: MIT (http://opensource.org/licenses/MIT)
 * author: appleple
 * homepage: http://developer.a-blogcms.jp
 * version: 1.1.0
 */

window.addEventListener('DOMContentLoaded',function(){
  new SmartPhoto(".js-smartPhoto",{
    resizeStyle: 'fit',
    arrows: true,
    nav: false
  });
});



// LazyLoad
// Copyright (c) 2015 by Andrea Verlicchi (https://github.com/verlok/lazyload)
// License (MIT): https://github.com/verlok/lazyload/blob/master/LICENSE

(function(w, d){
  var b = d.getElementsByTagName('body')[0];
  var s = d.createElement("script");
  var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.16.1";
  s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
  s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
  w.lazyLoadOptions = {
    elements_selector: ".lazy",
    threshold: "300"
  };
  b.appendChild(s);
}(window, document));
<script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">

<div style="height: 800px;"></div>
<img data-src= https://via.placeholder.com/350x120" alt="portfolio sample" data-aos="appear3" class="image lazy" />
                <a href="https://via.placeholder.com/350x120" class="js-smartPhoto" data-caption="test" data-id="test" data-group="test"><img src="https://via.placeholder.com/10x10" class="svg" /></a>
...