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

Question

фона:

Существует сайт со многими, многими изображениями. Однако пользователю необходимо сразу получить первые 15 изображений.

document.addEventListener("DOMContentLoaded", function() 
 
{ 
 
\t function loaded_3() 
 
\t { 
 
\t document.getElementById("left").innerHTML += "<br><br><strong>ALL DONE :)</strong><br><br>"; 
 
\t } 
 

 
\t function loaded_2() 
 
\t { 
 
\t document.getElementById("left").innerHTML += "<br><br><strong>OK - images 16-30 have also loaded successfully!</strong><br>NOW LOADING THE REMAINING 5 IMAGES!<br>"; 
 

 

 
\t var last_divs = Array.prototype.slice.call(document.querySelectorAll('[data-last-id]')); 
 

 
\t \t last_divs.forEach(function(element) 
 
\t \t { 
 
\t \t element.setAttribute('id', element.getAttribute('data-last-id')); 
 
\t \t document.getElementById("left").innerHTML += 'id="' + element.getAttribute('data-last-id') + '" was set successfully!<br>'; 
 
\t \t }); 
 

 
\t window.removeEventListener("load", loaded_2); 
 
\t window.addEventListener("load", loaded_3); 
 
\t } 
 

 
\t function loaded_1() 
 
\t { 
 
\t document.getElementById("left").innerHTML += "<strong>OK - images 1-15 have loaded successfully!</strong><br><br>"; 
 

 
\t var divs = Array.prototype.slice.call(document.querySelectorAll('[data-id]')); 
 

 
\t \t divs.forEach(function(element) 
 
\t \t { 
 
\t \t element.setAttribute('id', element.getAttribute('data-id')); 
 
\t \t document.getElementById("left").innerHTML += 'id="' + element.getAttribute('data-id') + '" was set successfully!<br>'; 
 
\t \t }); 
 

 
\t window.removeEventListener("load", loaded_1); 
 
\t window.addEventListener("load", loaded_2); 
 
\t } 
 

 
\t window.addEventListener("load", loaded_1); 
 
});

* 
 
{ 
 
padding:0px; 
 
margin:0px; 
 
border-style:none; 
 
box-sizing:border-box; 
 
} 
 

 
html, body 
 
{ 
 
width:100%; 
 
height:100%; 
 
} 
 

 
#left 
 
{ 
 
position:absolute; 
 
width:400px; 
 

 
left:0px; 
 
top:0px; 
 
bottom:0px; 
 
background-color:#ffcc00; 
 
padding:20px; 
 
} 
 

 
#right 
 
{ 
 
position:absolute; 
 
left:400px; 
 
top:0px; 
 
right:0px; 
 
bottom:0px; 
 
background-color:#eeeeee; 
 
padding:20px; 
 
} 
 

 

 
#one { background-image:url(https://placehold.it/999x999/ffcc00/cc33ff); } 
 
#two { background-image:url(https://placehold.it/999x999/ff0000/000000); } 
 
#three { background-image:url(https://placehold.it/999x999/00cc00/33cccc); } 
 
#four { background-image:url(https://placehold.it/999x999/330033/ff33ff); } 
 
#five { background-image:url(https://placehold.it/999x999/ffcccc/0033ff); } 
 
#six { background-image:url(https://placehold.it/999x999/bbcc11/dddd00); } 
 
#seven { background-image:url(https://placehold.it/999x999/0033bb/222bbb); } 
 
#eight { background-image:url(https://placehold.it/999x999/2211bb/00bb11); } 
 
#nine { background-image:url(https://placehold.it/999x999/ffcc00/22ccff); } 
 
#ten { background-image:url(https://placehold.it/999x999/ffcc00/33ccff); } 
 
#eleven { background-image:url(https://placehold.it/999x999/f0cc00/333333); } 
 
#twelve { background-image:url(https://placehold.it/999x999/f1c20b/c13bf2); } 
 
#thirteen { background-image:url(https://placehold.it/999x999/f0cd00/cf33f0); } 
 
#fourteen { background-image:url(https://placehold.it/999x999/ff0b01/0001ff); } 
 
#fifteen { background-image:url(https://placehold.it/999x999/ffbb00/dd31ff); } 
 
#sixteen { background-image:url(https://placehold.it/999x999/ffd100/cc33ff); } 
 
#seventeen { background-image:url(https://placehold.it/999x999/ffec10/000000); } 
 
#eighteen { background-image:url(https://placehold.it/999x999/fbccfd/ff33ff); } 
 
#nineteen { background-image:url(https://placehold.it/999x999/ccccff/cf33f0); } 
 
#twenty { background-image:url(https://placehold.it/999x999/00ccee/cc33ff); } 
 
#twentyone { background-image:url(https://placehold.it/999x999/ddccee/dddd00); } 
 
#twentytwo { background-image:url(https://placehold.it/999x999/bbee00/cc33ff); } 
 
#twentythree { background-image:url(https://placehold.it/999x999/11c000/c13bf2); } 
 
#twentyfour { background-image:url(https://placehold.it/999x999/44c200/00bb11); } 
 
#twentyfive { background-image:url(https://placehold.it/999x999/22ca00/33cccc); } 
 
#twentysix { background-image:url(https://placehold.it/999x999/bbcf00/cc33ff); } 
 
#twentyseven { background-image:url(https://placehold.it/999x999/ffbb00/00bb11); } 
 
#twentyeight { background-image:url(https://placehold.it/999x999/eedd00/cc33ff); } 
 
#twentynine { background-image:url(https://placehold.it/999x999/00ff00/33ccff); } 
 
#thirty { background-image:url(https://placehold.it/999x999/220000/c13bf2); } 
 

 
.testdiv 
 
{ 
 
width:30px; 
 
height:30px; 
 
overflow:hidden; 
 
margin:5px; 
 

 
display:inline-block; 
 
font-weight:bold; 
 
font-size:30px; 
 
color:#ffffff; 
 
text-align:center; 
 
line-height:30px; 
 
}

<div id="left"></div> 
 

 
<div id="right"> 
 

 
<div class="testdiv" id="one">1</div> 
 
<div class="testdiv" id="two">2</div> 
 
<div class="testdiv" id="three">3</div> 
 
<div class="testdiv" id="four">4</div> 
 
<div class="testdiv" id="five">5</div> 
 
<div class="testdiv" id="six">6</div> 
 
<div class="testdiv" id="seven">7</div> 
 
<div class="testdiv" id="eight">8</div> 
 
<div class="testdiv" id="nine">9</div> 
 
<div class="testdiv" id="ten">10</div> 
 
<div class="testdiv" id="eleven">11</div> 
 
<div class="testdiv" id="twelve">12</div> 
 
<div class="testdiv" id="thirteen">13</div> 
 
<div class="testdiv" id="fourteen">14</div> 
 
<div class="testdiv" id="fifteen">15</div> 
 

 
<div class="testdiv" data-id="sixteen">16</div> 
 
<div class="testdiv" data-id="seventeen">17</div> 
 
<div class="testdiv" data-id="eighteen">18</div> 
 
<div class="testdiv" data-id="nineteen">19</div> 
 
<div class="testdiv" data-id="twenty">20</div> 
 
<div class="testdiv" data-id="twentyone">21</div> 
 
<div class="testdiv" data-id="twentytwo">22</div> 
 
<div class="testdiv" data-id="twentythree">23</div> 
 
<div class="testdiv" data-id="twentyfour">24</div> 
 
<div class="testdiv" data-id="twentyfive">25</div> 
 

 
<div class="testdiv" data-last-id="twentysix">26</div> 
 
<div class="testdiv" data-last-id="twentyseven">27</div> 
 
<div class="testdiv" data-last-id="twentyeight">28</div> 
 
<div class="testdiv" data-last-id="twentynine">29</div> 
 
<div class="testdiv" data-last-id="thirty">30</div> 
 

 
</div> <!-- right -->

следующих 10 изображений должны быть загружены, как только загрузили первые 15 изображений. И последние 5 изображений должны загружаться после того, как первые 15 и следующие 10 изображений закончили загрузку.

Вот что я пробовал: https://filebin.net/01s7w1grpybvkiis/fourth.html

Мой подход был установлен идентификатор = «» только, и пусть CSS делать запросы средств массовой информации. Конечно, я мог бы использовать JS для загрузки изображений (тогда я мог бы легко узнать, какие из них загружены), но мне нужно позаботиться обоим, CSS-width и также соотношение пикселей !!

Так что я не могу загрузить определенные изображения в JS, потому что фоновое изображение, которое будет загружено, будет другим, в зависимости от ширины CSS и коэффициента пикселизации (не реализовано в моем тестовом примере, но вам нужно иметь эту информацию !).

Вот почему я попытался его с JS и CSS вместе (пример: https://filebin.net/01s7w1grpybvkiis/fourth.html)

Я нашел библиотеку JS (названный enquire.js), который говорит, что это может сделать медиазапросы в чистом JS, но это не удалось используйте медиа-запросы для соотношения пикселей, поэтому я снова пытаюсь использовать его в CSS-запросах.

Как я могу написать для этого чистое решение для JavaScript? Я предпочитаю не использовать jQuery на этом этапе.

Answer 1

До сих пор это то, что я сделал:

console.clear(); 
 
     checkBackgroundLoad(); 
 
     var imgSrc = []; 
 
     document.body.addEventListener('DOMSubtreeModified', function() { 
 
      var imgs = document.getElementsByTagName("IMG"); 
 
      //console.log(imgs); 
 
      for (var i = 0; i < imgs.length; i++) { 
 
       var src = imgs[i].getAttribute('src'); 
 
       if (imgSrc.indexOf(src) > -1) return; 
 
       imgSrc.push(src); 
 
       if (imgs[i].complete) continue; 
 
       imgs[i].onload = function() { console.log("Loaded Image"); } 
 
       imgs[i].onerror = function() { console.log("Fail to Load Image"); } 
 
      } 
 

 
      checkBackgroundLoad(); 
 

 
     }, false); 
 

 
     function checkBackgroundLoad() { 
 
      var all = document.getElementsByTagName("*"); 
 
      for (var i = 0; i < all.length; i++) { 
 
       var id = all[i].getAttribute("id"); 
 
       var style = all[i].currentStyle || window.getComputedStyle(all[i], false); 
 
       //console.log(style); 
 
       var bi = style.backgroundImage.slice(4, -1); 
 
       LoadBackgroundImage(bi, id); 
 
      } 
 
     } 
 

 
     var uniqueImg = []; 
 
     var countLoad = 0; 
 
     var completionCallback = undefined; 
 

 
     function LoadBackgroundImage(bi, id) { 
 
      if (bi.length < 1) return; 
 
      if (countLoad < 1) return; 
 
      bi = bi.replace(new RegExp('"', 'g'), ''); 
 
      //var imageName = bi.replace(/[^a-zA-Z0-9]/g, ""); 
 
      if (uniqueImg.indexOf(bi) != -1) { 
 
       //countLoad--; 
 
       return; 
 
      } 
 
      uniqueImg.push(bi); 
 
      console.log(id); 
 
      var img = new Image(); 
 
      img.onload = function() { 
 
       console.log("Loaded Background Image"); 
 
       LogLoad(id); 
 
       CompleteLoad(); 
 
      }; 
 
      img.onerror = function() { 
 
       console.log("Fail to load Background Image"); 
 
       CompleteLoad(); 
 
      } 
 
      img.src = bi; 
 
     } 
 

 
     function CompleteLoad() { 
 
      countLoad--; 
 
      //console.log(countLoad); 
 
      if (countLoad > 0) return; 
 
      if (countLoad == 0) { 
 
       //uniqueImg = []; 
 
       completionCallback(); 
 
       return; 
 
      } 
 
     } 
 

 
     function LogLoad(id) { 
 
      document.getElementById("left").innerHTML += 'id="' + 
 
       id + 
 
       '" Loaded <br>'; 
 
     } 
 

 

 
     function firstBatch() { 
 
      var divs = Array.prototype.slice.call(document.querySelectorAll('[first-id]')); 
 
      countLoad = divs.length; 
 
      completionCallback = secondBatch; 
 
      divs.forEach(function (element) { 
 
       element.setAttribute('id', element.getAttribute('first-id')); 
 
       document.getElementById("left").innerHTML += 'id="' + 
 
        element.getAttribute('first-id') + 
 
        '" start loading!<br>'; 
 
      }); 
 
     } 
 

 
     var secondBatch = function() { 
 
      var divs = Array.prototype.slice.call(document.querySelectorAll('[data-id]')); 
 
      countLoad = divs.length; 
 
      completionCallback = thirdBatch; 
 
      divs.forEach(function (element) { 
 
       element.setAttribute('id', element.getAttribute('data-id')); 
 
       document.getElementById("left").innerHTML += 'id="' + 
 
        element.getAttribute('data-id') + 
 
        '" start loading!<br>'; 
 
      }); 
 
     } 
 

 
     var thirdBatch = function (callback) { 
 
      var lastDivs = Array.prototype.slice.call(document.querySelectorAll('[data-last-id]')); 
 
      countLoad = lastDivs.length; 
 
      completionCallback = LastBatch; 
 
      lastDivs.forEach(function (element) { 
 
       element.setAttribute('id', element.getAttribute('data-last-id')); 
 
       document.getElementById("left").innerHTML += 'id="' + 
 
        element.getAttribute('data-last-id') + 
 
        '" start loading!<br>'; 
 
      }); 
 
     } 
 

 
     function LastBatch() { 
 
      for (var i = 0; i < 10; i++) { 
 
       document 
 
        .getElementById("right") 
 
        .innerHTML += '<img src="http://lorempixel.com/400/200/?' + i + '" style="width: 30px;height: 30px;" />'; 
 
      } 
 
     } 
 

 
     firstBatch();

{ 
 
padding:0px; 
 
margin:0px; 
 
border-style:none; 
 
box-sizing:border-box; 
 
} 
 

 
html, body 
 
{ 
 
width:100%; 
 

 
} 
 

 
#left 
 
{ 
 
position:absolute; 
 
width:400px; 
 

 
left:0px; 
 
top:0px; 
 
bottom:0px; 
 
background-color:#ffcc00; 
 
padding:20px; 
 
} 
 

 
#right 
 
{ 
 
position:absolute; 
 
left:400px; 
 
top:0px; 
 
right:0px; 
 
bottom:0px; 
 
background-color:#eeeeee; 
 
padding:20px; 
 
} 
 

 

 
#one { background-image:url(https://placehold.it/999x999/ffcc00/cc33ff); } 
 
#two { background-image:url(https://placehold.it/999x999/ff0000/000000); } 
 
#three { background-image:url(https://placehold.it/999x999/00cc00/33cccc); } 
 
#four { background-image:url(https://placehold.it/999x999/330033/ff33ff); } 
 
#five { background-image:url(https://placehold.it/999x999/ffcccc/0033ff); } 
 
#six { background-image:url(https://placehold.it/999x999/bbcc11/dddd00); } 
 
#seven { background-image:url(https://placehold.it/999x999/0033bb/222bbb); } 
 
#eight { background-image:url(https://placehold.it/999x999/2211bb/00bb11); } 
 
#nine { background-image:url(https://placehold.it/999x999/ffcc00/22ccff); } 
 
#ten { background-image:url(https://placehold.it/999x999/ffcc00/33ccff); } 
 
#eleven { background-image:url(https://placehold.it/999x999/f0cc00/333333); } 
 
#twelve { background-image:url(https://placehold.it/999x999/f1c20b/c13bf2); } 
 
#thirteen { background-image:url(https://placehold.it/999x999/f0cd00/cf33f0); } 
 
#fourteen { background-image:url(https://placehold.it/999x999/ff0b01/0001ff); } 
 
#fifteen { background-image:url(https://placehold.it/999x999/ffbb00/dd31ff); } 
 
#sixteen { background-image:url(https://placehold.it/999x999/ffd100/cc33ff); } 
 
#seventeen { background-image:url(https://placehold.it/999x999/ffec10/000000); } 
 
#eighteen { background-image:url(https://placehold.it/999x999/fbccfd/ff33ff); } 
 
#nineteen { background-image:url(https://placehold.it/999x999/ccccff/cf33f0); } 
 
#twenty { background-image:url(https://placehold.it/999x999/00ccee/cc33ff); } 
 
#twentyone { background-image:url(https://placehold.it/999x999/ddccee/dddd00); } 
 
#twentytwo { background-image:url(https://placehold.it/999x999/bbee00/cc33ff); } 
 
#twentythree { background-image:url(https://placehold.it/999x999/11c000/c13bf2); } 
 
#twentyfour { background-image:url(https://placehold.it/999x999/44c200/00bb11); } 
 
#twentyfive { background-image:url(https://placehold.it/999x999/22ca00/33cccc); } 
 
#twentysix { background-image:url(https://placehold.it/999x999/bbcf00/cc33ff); } 
 
#twentyseven { background-image:url(https://placehold.it/999x999/ffbb00/00bb11); } 
 
#twentyeight { background-image:url(https://placehold.it/999x999/eedd00/cc33ff); } 
 
#twentynine { background-image:url(https://placehold.it/999x999/00ff00/33ccff); } 
 
#thirty { background-image:url(https://placehold.it/999x999/220000/c13bf2); } 
 

 
.testdiv 
 
{ 
 
width:30px; 
 
height:30px; 
 
overflow:hidden; 
 
margin:5px; 
 

 
display:inline-block; 
 
font-weight:bold; 
 
font-size:30px; 
 
color:#ffffff; 
 
text-align:center; 
 
line-height:30px; 
 
}

<div id="left"></div> 
 

 
<div id="right"> 
 

 
    <div class="testdiv" first-id="one">1</div> 
 
    <div class="testdiv" first-id="two">2</div> 
 
    <div class="testdiv" first-id="three">3</div> 
 
    <div class="testdiv" first-id="four">4</div> 
 
    <div class="testdiv" first-id="five">5</div> 
 
    <div class="testdiv" first-id="six">6</div> 
 
    <div class="testdiv" first-id="seven">7</div> 
 
    <div class="testdiv" first-id="eight">8</div> 
 
    <div class="testdiv" first-id="nine">9</div> 
 
    <div class="testdiv" first-id="ten">10</div> 
 
    <div class="testdiv" first-id="eleven">11</div> 
 
    <div class="testdiv" first-id="twelve">12</div> 
 
    <div class="testdiv" first-id="thirteen">13</div> 
 
    <div class="testdiv" first-id="fourteen">14</div> 
 
    <div class="testdiv" first-id="fifteen">15</div> 
 

 
    <div class="testdiv" data-id="sixteen">16</div> 
 
    <div class="testdiv" data-id="seventeen">17</div> 
 
    <div class="testdiv" data-id="eighteen">18</div> 
 
    <div class="testdiv" data-id="nineteen">19</div> 
 
    <div class="testdiv" data-id="twenty">20</div> 
 
    <div class="testdiv" data-id="twentyone">21</div> 
 
    <div class="testdiv" data-id="twentytwo">22</div> 
 
    <div class="testdiv" data-id="twentythree">23</div> 
 
    <div class="testdiv" data-id="twentyfour">24</div> 
 
    <div class="testdiv" data-id="twentyfive">25</div> 
 

 
    <div class="testdiv" data-last-id="twentysix">26</div> 
 
    <div class="testdiv" data-last-id="twentyseven">27</div> 
 
    <div class="testdiv" data-last-id="twentyeight">28</div> 
 
    <div class="testdiv" data-last-id="twentynine">29</div> 
 
    <div class="testdiv" data-last-id="thirty">30</div> 
 

 
</div>