JS動態加載響應圖像，並找出當加載

有很多很多圖片網站。但是，用戶只需要立即收到前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

我的方法是設置一個id =「」只是，讓CSS做媒體的查詢。當然，我可以使用JS加載圖像（然後我可以很容易地找出哪些已加載），但我需要照顧兩者，CSS寬度和也像素比！

所以我不能加載JS中的特定圖像，因爲要加載的背景圖像將是不同的，這取決於CSS寬度和像素比率（未在我的測試案例中實現，但您需要具有此信息！）。

這就是爲什麼我與JS和CSS嘗試了一起（參見例如：https://filebin.net/01s7w1grpybvkiis/fourth.html）

我發現了一個庫JS（名爲enquire.js），它說，它可以做媒體查詢純JS，但未能使用媒體查詢的像素比，所以我再次嘗試CSS媒體查詢。

我該如何爲此編寫純JavaScript解決方案？我不喜歡在這個階段使用jQuery。

來源

2017-01-23 Ronny

嗨，你能不能請在這裏編輯你的代碼的相關位進入正題？即使任何鏈接的外部資源出現故障，堆棧溢出的問題預計也會有效。 –

你也可以澄清你想達到什麼 - 這個'下一個10張圖片應該在第一個15張圖片加載後立即加載'聽起來像是在將一張圖片一個接一個地列出時的默認行爲，不是？ –

@皮卡웃我看了一下，代碼非常廣泛，所以我沒有在這裏複製它。 Ronny，嘗試在編輯器中使用'<>'按鈕在這裏創建一個[mcve] – mplungjan

到目前爲止，這是我做過什麼：

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>

來源

2017-01-23 16:04:22 SilentTremor

JS動態加載響應圖像，並找出當加載

回答

相關問題