JS动态加载响应式图片并找出加载时间

【问题标题】：JS dynamically load responsive images and find out when they are loadedJS动态加载响应式图片并找出加载时间
【发布时间】：2017-02-20 05:50:11
【问题描述】：

背景：

有一个网站有很多很多图片。 但是，用户只需要立即收到前 15 张图像。

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

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


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

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

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

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

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

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

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

	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 -->

前 15 张图片加载完毕后，应立即加载接下来的 10 张图片。 并且最后 5 张图片应该在前 15 张图片和接下来的 10 张图片加载完成之后加载。

这是我尝试过的： https://filebin.net/01s7w1grpybvkiis/fourth.html

我的方法是只设置一个 id=""，然后让 CSS 进行媒体查询。 当然我可以使用 JS 来加载图像（然后我可以很容易地找出加载了哪些图像），但是我需要同时处理 CSS-width 和 以及像素比！！

所以我不能在 JS 中加载特定的图像，因为要加载的背景图像将是不同的，取决于 CSS 宽度和像素比（在我的测试用例中没有实现，但你需要这些信息！ )。

这就是我将 JS 和 CSS 一起尝试的原因（参见示例：https://filebin.net/01s7w1grpybvkiis/fourth.html）

我找到了一个 JS 库（名为 enquire.js），它说它可以在纯 JS 中进行媒体查询，但它无法使用媒体查询来获取像素比，所以我再次尝试使用 CSS 媒体查询。

如何为此编写纯 JavaScript 解决方案？我不想在这个阶段使用 jQuery。

【问题讨论】：

  • 您好，您可以在此处将代码的相关位编辑到问题中吗？即使任何链接的外部资源出现故障，此处有关 Stack Overflow 的问题也应正常运行。
  • 您也可以澄清一下您想要实现的目标 - 这个The next 10 images should be loaded as soon as the first 15 images have loaded 听起来像是一个接一个地列出一张图片时的默认行为，不是吗？
  • @Pekka웃 我看了一下，代码真的很丰富，所以我没有在这里复制它。 Ronny，尝试使用编辑器中的&lt;&gt; 按钮在此处创建minimal reproducible example
  • @mplungjan 代码已经尽可能短了:( 我只是尝试找到可以添加源代码的按钮。但是，我需要从外部加载图像，因为我想我无法上传它们在这里。
  • 您可以使用 lorem 像素 - ctrl-m 在您编辑问题时加载代码编辑器

标签： javascript image media-queries responsive preload


【解决方案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>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-09-26
    • 1970-01-01
    • 2014-07-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode