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

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 的 .load() 函数，如下所示：

$("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中使用了onLoad html:

<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 在加载上面的图像后立即加载

want div to load immediately after the image above it is loaded

html

javascript

css

jquery

featherlight.js