多个图像加载动画不起作用

Question

我的 html 页面上有两个图像，我使用 jquery 在删除圆形加载器覆盖之前检查它们何时完全加载（每个图像单独）。因此，在开始时，每张图片上都会显示带有加载程序动画的叠加层，并且每次加载图片时都会关闭叠加层。但是使用我当前的代码，叠加层根本没有关闭。

<div class="img" id="img1">

    <div class="image-loader">

        <div class="cssload-speeding-wheel"></div>

    </div>

</div>

<div class="img" id="img2">

    <div class="image-loader">

        <div class="cssload-speeding-wheel"></div>

    </div>

</div>

$(document).ready(function(){

    $('.img').each(function(){

        let img = $(this).css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");

        $('<img/>').attr('src', img).on('load', function() {

            $('#' + $(this).attr('id') + ' .image-loader').hide();

        });

    });

});

该代码适用于单个图像：

$(document).ready(function(){

    let img = $('#img1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "");

    $('<img/>').attr('src', img).on('load', function() {

        $('#img1 .image-loader').hide();

    });

});

有人对此有解决方案吗？谢谢

Answer 1

this您的load函数内部指的是动态$('<img/>')元素。也是如此$(this).attr('id')，undefined并且没有一个装载机消失。您需要在之前存储一个引用并使用它，如下所示：$(document).ready(function() {&nbsp; $('.img').each(function() {&nbsp; &nbsp; let img = $(this).css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, "");&nbsp; &nbsp; let id = $(this).attr('id')&nbsp; &nbsp; $('<img/>').attr('src', img).on('load', function() {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('#' + id + ' .image-loader').hide();&nbsp; &nbsp; });&nbsp; });});body {&nbsp; margin: 0}.view {&nbsp; height: 100vh;&nbsp; width: 100vw;&nbsp; background-color: blanchedalmond;&nbsp; display: grid;&nbsp; place-content: center;}.img {&nbsp; background-position: center center;&nbsp; background-size: cover;&nbsp; height: 50vh;&nbsp; width: 50vw;}#img1 {&nbsp; background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/73000/73751/world.topo.bathy.200407.3x5400x2700.jpg');}#img2 {&nbsp; background-image: url('https://edmullen.net/test/rc.jpg');}.image-loader {&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; display: grid;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; background-color: rgba(0, 0, 0, 0.7);}.cssload-speeding-wheel {&nbsp; width: 49px;&nbsp; height: 49px;&nbsp; margin: 0 auto;&nbsp; border: 5px solid rgba(255, 255, 255, 0.85);&nbsp; border-radius: 50%;&nbsp; border-left-color: transparent;&nbsp; border-right-color: transparent;&nbsp; animation: cssload-spin 800ms infinite linear;&nbsp; -o-animation: cssload-spin 800ms infinite linear;&nbsp; -ms-animation: cssload-spin 800ms infinite linear;&nbsp; -webkit-animation: cssload-spin 800ms infinite linear;&nbsp; -moz-animation: cssload-spin 800ms infinite linear;}@keyframes cssload-spin {&nbsp; 100% {&nbsp; &nbsp; transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}@-o-keyframes cssload-spin {&nbsp; 100% {&nbsp; &nbsp; -o-transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}@-ms-keyframes cssload-spin {&nbsp; 100% {&nbsp; &nbsp; -ms-transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}@-webkit-keyframes cssload-spin {&nbsp; 100% {&nbsp; &nbsp; -webkit-transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}@-moz-keyframes cssload-spin {&nbsp; 100% {&nbsp; &nbsp; -moz-transform: rotate(360deg);&nbsp; &nbsp; transform: rotate(360deg);&nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="view">&nbsp; <div class="img" id="img1">&nbsp; &nbsp; <div class="image-loader">&nbsp; &nbsp; &nbsp; <div class="cssload-speeding-wheel"></div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="img" id="img2">&nbsp; &nbsp; <div class="image-loader">&nbsp; &nbsp; &nbsp; <div class="cssload-speeding-wheel"></div>&nbsp; &nbsp; </div>&nbsp; </div></div>