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

Question

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

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

$ img在函数中定义。 警报在document.ready行上运行，但不在$img.load 。 我试图添加eventlisteners，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();
});

这是JSFiddle演示

Answer 2

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

$(function(){

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

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

});

同样根据文档，开发人员尝试使用.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>