如何在使用 JQuery 加载图像后运行代码

Question

我只在加载了 img 元素后才尝试加载一个元素，但我已经尝试了所有我能想到的方法，但没有任何效果。现在我正试图查看代码在哪里停止工作，我发现我设置的警报在我需要执行代码的行之后没有运行。

$img = $('#picture');
function bubbleOnLoad() {
  $(document).ready(function() {
    $img.load(function(){
    alert('document loaded')
    $('#left-bubble').show();
  })
})

$img 是在函数中定义的。警报在 document.ready 行有效，但在 $img.load 之后无效。我尝试添加事件监听器、jquery .on、.load 和其他一些。我还在调用该函数以在我的 init 函数中运行。有人可以向我解释为什么没有任何效果吗？

function choosePic() 
 $('.speechbubble').hide();
 $('#picture').remove();
 var randomNum = Math.floor(Math.random() * samplePics.length);
 var img = new Image();
 img.onload = function() {
  $('.playing-field').prepend(img);
 handleImageLoad();
 }
 img.src = samplePics[randomNum];
 img.id = "picture";
}


var samplePics = 
 "assets/images/barack-obama.jpg",
 "assets/images/donald-trump_3.jpg",
 "assets/images/dt-2.jpg",
 "assets/images/bill-clinton.jpg",
 "assets/images/Rose-Byrne.jpg",
 "assets/images/pic.jpeg", 
 "assets/images/priest.jpg", 
 "assets/images/tb.jpg",
 "assets/images/test.jpg", 
 "assets/images/amy-poehler.jpg",
 "assets/images/stephen-colbert.jpg",
 "assets/images/aziz-ansari.jpg"
];

Answer 1

您的代码中有一些语法错误，我已更正并提出了以下问题：

function bubbleOnLoad() {
    $img = $('#picture');
    $img.load(function () {
        alert('document loaded');
        $('#left-bubble').show();
    });
}

$(document).ready(function () {
    bubbleOnLoad();
});

Here is the JSFiddle demo

Answer 2

在您的代码中，您甚至没有告诉浏览器它应该在图像加载后运行代码。你应该这样做：

$(function(){

  // DOM Content is ready, let's interact with it.

  $('#picture').attr('src', 'image.jpg').load(function() {  
    // run code
    alert('Image Loaded');  
  });

});

另外according to docs 开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行一个函数。应该注意几个已知的警告。它们是：

• 它不能始终如一地工作，也不能可靠地跨浏览器
• 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
• 它没有正确地冒泡 DOM 树 可以停止为已经存在于浏览器缓存中的图像触发

Answer 3

试试这个 jQuery 插件 waitForImages

https://github.com/alexanderdickson/waitForImages

//Javascript/jQuery
$(document).ready(function(){
  var counter = 0,totalImages= $('#preloader').find('img').length; 
  $('#preloader').find('img').waitForImages(function() {
    //fires for all images waiting for the last one.
    if (++counter == totalImages) {
      $('#preloader').hide();
      yourCallBack();
    }
  });
});

/*css*/
#preloader{
  position:absolute;
  top:-100px;/*dont put in DOM*/
}

#preloader > img{
  width:1px;
  height:1px;
}

<!--HTML [add the plugin after jQuery] -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js" ></script>
 

<!--HTML [after body start] -->
<div id=preloader>
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.png" />
  <img src="4.gif" />
  <img src="5.jpg" />
</div>

Answer 4

您只能访问在 DOM 中创建的 HTML 元素。
您还需要在显示之前检查图像是否已加载。
因此，您的代码需要如下所示：

$(document).ready(function() {
    bubbleOnLoad(); 
});
      
function bubbleOnLoad() {
    var newSrc = "https://lh5.googleusercontent.com/-lFNPp0DRjgY/AAAAAAAAAAI/AAAAAAAAAD8/Fi3WUhXGOY0/photo.jpg?sz=328";
    $img = $('#picture');
    $img.attr('src', newSrc) //Set the source so it begins fetching
      .each(function() {
          if(this.complete) {
            alert('image loaded')
            $('#left-bubble').show();
          }
      });
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-bubble" style="display:none">
  <img id="picture"/>
</div>