Question

我想在同一时间加载，或者在上面的图像之后立即加载。它在图像前保持加载，并且标题div在预加载器内部旋转 - 没有好处！这是html：

<div id="modalContent" class="featherlight-content">

    <span class="featherlight-close-icon featherlight-close">✕</span>

    <img src="http://johnhoich.com/wp-content/uploads/2015/11/John-Hoich-30.jpg" alt="" class="featherlight-image featherlight-inner" style="width: 965.457px; height: 584px;">

    <div class="modal-caption" style="display: block;">
        Various investments in stock, portfolio managed by John L. Hoich, T.D. Ameritrade, Kevin Welch/Morgan Stanley
    </div>
</div>

使用js - 如何在加载图像后立即加载？

Answer 1

您可以使用jQuery的{{3}}功能，如下所示：

$("img").load(function() {
  $(".modal-caption").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalContent" class="featherlight-content">

  <span class="featherlight-close-icon featherlight-close">✕</span>

  <img src="http://johnhoich.com/wp-content/uploads/2015/11/John-Hoich-30.jpg" alt="" class="featherlight-image featherlight-inner" style="width: 965.457px; height: 584px;">

  <div class="modal-caption" style="display: none;">Various investments in stock, portfolio managed by John L. Hoich, T.D. Ameritrade, Kevin Welch/Morgan Stanley</div>
</div>

默认情况下，必须隐藏.modal-caption隐藏display至none。

Answer 2

在你的HTML中：

<img onLoad="onMyImgLoad()" src="http://johnhoich.com/wp-content/uploads/2015/11/John-Hoich-30.jpg" alt="" class="featherlight-image featherlight-inner" style="width: 965.457px; height: 584px;" />

在您的Javascript中：

var mydiv = document.querySelector(".modal-caption");
mydiv.style.display = "none"; // Hide by default

var onMyImgLoad = function(){
   mydiv.style.display = "block"; // Show on img loaded
};

Answer 3

我认为你需要的是：

隐藏div想要显示的内容（CSS）
使用onload或jQuery的.load()函数显示隐藏的div

$(document).ready(function(){
    $(".loader").load(function() {
      $(".modal-caption").show();
    });
});

.modal-caption{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalContent" class="featherlight-content">

    <span class="featherlight-close-icon featherlight-close">✕</span>

    <img class="loader" src="http://johnhoich.com/wp-content/uploads/2015/11/John-Hoich-30.jpg" alt="" class="featherlight-image featherlight-inner" style="width: 965.457px; height: 584px;">

    <div class="modal-caption" style="display: block;">
        Various investments in stock, portfolio managed by John L. Hoich, T.D. Ameritrade, Kevin Welch/Morgan Stanley
    </div>
</div>

Answer 4

通过反复试验回答了我自己的问题。

<强>解决方案：

我在img html中使用了onLoad：

<img onload="loadImage()" src="/Omaha-Westside-High-School.png" alt=""
class="featherlight-image featherlight-inner" style="width: 344.188px; 
height: 190px;">

然后对于我用过的js：

function loadImage() {
      $(".modal-caption").show();
}

希望div在加载上面的图像后立即加载

4 个答案: