https://s.skygate.co.jp/pc/js/clazyimg.js?20261004044103

1(function(window, $) {
2  var type = '';
3  var clazyAtt = 'data-clazy';
4  var clazyComp = 'clazy-complete';
5  var clazyTimer = null;
6  var cRender = function(entry, type, ioObj) {
7    var ioImgObj;
8    type === 'ioRender' ? ioImgObj = $(entry.target) : ioImgObj = $(entry);
9    var ioImgChk = new Image();
10    if(ioImgObj.attr(clazyAtt)){
11      var ioImgPath = ioImgObj.attr(clazyAtt);
12      ioImgChk.onload = function () {
13        ioImgObj.animate({opacity : '0'}, {
14          complete:function () {
15            ioImgObj.attr('src', ioImgPath).animate({opacity : '1'}, 300);
16            ioImgObj.removeAttr('style').addClass(clazyComp);
17            if(type === 'ioRender'){ioObj.unobserve(entry.target);}
18          }
19        }, 200);
20      }
21      ioImgChk.onerror = function() {
22        ioImgObj.animate({opacity : '0'}, {
23          complete:function () {
24            ioImgObj.attr('src', '//s.skygate.co.jp/images/common/lpframe/dmy_gene.jpg').animate({opacity : '1'}, 300);
25            ioImgObj.removeAttr('style').addClass(clazyComp);
26            if(type === 'ioRender'){ioObj.unobserve(entry.target);}
27          }
28        }, 200);
29      }
30      ioImgChk.src = ioImgPath;
31    }
32  }
33  var clazyRender = function(entries) {
34    entries.forEach(function(entry) {
35      if(!$(entry).hasClass(clazyComp)){
36        cRender(entry);
37      }
38    });
39  }
40  var ioClazyRender = function(entries, ioObj) {
41    type = 'ioRender';
42    entries.forEach(function(entry, i) {
43      if (!entry.isIntersecting) return;
44      cRender(entry, type, ioObj);
45    });
46  }
47  $(function() {
48    var clazySelector = '.clazy';
49    $(clazySelector).css({
50      'width': '48px',
51      'height': '48px',
52      'background-color':'rgba(255,255,255,0.9)',
53      'border-radius': '6px',
54      'display': 'block',
55      'margin': '0 auto'
56    });
57    var clazyTarget = document.querySelectorAll(clazySelector);
58    var clazyTargets = [].slice.call(clazyTarget,0);
59    var clazyMargin = 200;
60    if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
61      var options = {
62        rootMargin: clazyMargin + 'px '+ clazyMargin +'px',
63        threshold: [0]
64      }
65      var io = new IntersectionObserver(ioClazyRender, options);
66      clazyTargets.forEach(function(ioItem) {
67        io.observe(ioItem);
68      });
69    } else {
70      clazyRender(clazyTargets);
71    }
72  });
73})(window, jQuery);