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动态加载响应图像，并找出当加载

回答

相关问题