主页 / 问题 / 1188226
Accepted
midnightelf18
Asked:2020-10-10 00:23:52 +0000 UTC2020-10-10 00:23:52 +0000 UTC

如何仅在使用获取请求加载图片时进行回调

  • 772

我正在向return返回生成的 html 的地址发出请求。
请求代码如下所示：

document.addEventListener("DOMContentLoaded", function() {
    axios.get("/get-cards")
        .then(response => {
            document.getElementById("load").remove();
            $("#content").html(response.data);
        })
        .catch(error => {
            console.log(`ERROR: ${error}`);
        });
});

生成 html 的页面（位于 /get-cards）如下所示：

@foreach($technics as $technic)
    <div class="technic-card">
        <div class="card-img">
            <div style="background-image: url('{{ $technic->img_1 }}'" alt="{{ $technic->name }}">
            <div style="background-image: url('{{ $technic->img_2 }}'" alt="{{ $technic->name }}">
            <div style="background-image: url('{{ $technic->img_3 }}'" alt="{{ $technic->name }}">
        </div>
        <div class="card-name">{{ $technic->name }}</div>
        <div class="card-type">{{ $technic->type }}</div>
        <div class="card-footer">
            <div class="card-price">{{ $technic->price }}/час</div>
            <div class="card-buy-btn">арендовать</div>
        </div>
    </div>
@endforeach

我需要一个现成的带有加载图片的 html 来添加到页面中，但是会出现以下情况。

  1. 加载页面，从该页面发送请求，然后将响应发送到该页面（html标记）并添加
  2. 加载指示灯亮
  3. 请求返回响应
  4. 加载指示器已移除
  5. 将html代码添加到页面
  6. 和图片开始加载 它看起来像这样

我怎样才能让加载指示器在图片加载之前不会消失？

javascript

1 个回答

  1. Best Answer

    您需要找到所有图片并等待它们加载的那一刻

    在示例中，为方便起见，我将图像的 url 放在了单独的属性中，但很可能element.style得到

    // вместо getCards будет запрос через axios
getCards()

// когда ответ пришёл
.then(html => {
  
  $('#content').html(html);
  
  let loading = [];
  
  // ищем картинки для прогрузки
  $('#content [data-bg]').each(function(){
    loading.push(new Promise(resolve => {
      // Собираем url которые придётся грузить
      let url = $(this).data('bg');
      // создаём в памяти картинку
      let img = new Image();
      // и грузим её
      img.src = url;
      
      // когда загрузится, ставим её в background-image
      // и отчитываемся о завершении
      img.onload = () => {
        $(this).css('background-image', `url(${url})`);
        resolve();
      }
    }));
  });
  
  // когда всё загрузится
  Promise.all(loading).then(()=>{
    // убираем заглушку
    // и показываем контент
    $('#load').remove();
    $('#content').removeClass('loading');
  })
  
});




function getCards(){
  
  return new Promise(resolve => {
    
    setTimeout(()=>{
      resolve(
      
        `<div class="card">
          <div data-bg="https://via.placeholder.com/350x150?r=${Math.random()}"></div>
          <div data-bg="https://via.placeholder.com/350x150?r=${Math.random()}"></div>
          <div data-bg="https://via.placeholder.com/350x150?r=${Math.random()}"></div>
        </div>

        <div class="card">
          <div data-bg="https://via.placeholder.com/350x150?r=${Math.random()}"></div>
          <div data-bg="https://via.placeholder.com/350x150?r=${Math.random()}"></div>
          <div data-bg="https://via.placeholder.com/350x150?r=${Math.random()}"></div>
        </div>
        `
      
      );
      
    },1000);
    
  })
  
}
    .loading{
  display:none;

}

[data-bg]{
  display: inline-block;
  width:70px;
  height:70px;
  background-position: center;
  background-size:cover;
  border: 1px solid;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="load">Loading...</div>

<div id="content" class="loading"></div>

    您还可以使用waitForImages插件

    • 1

相关问题