如何使用JQuery在图片加载完成后运行代码

Question

如何使用JQuery在图片加载完成后运行代码

6

我尝试在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"
];

- Tiffany Haltom

1

这个 img 是通过 JavaScript 动态加载的吗？还是使用了 img HTML 标签？ - Jonathan.Brink

1

你是否阅读了文档，特别是关于与图像一起使用时的“加载事件警告” http://api.jquery.com/load-event/？ - Pevara

2

你为什么要将它包装在bubbleOnLoad函数中？那个函数有被调用过吗？ - trex005

1

为什么在bubbleOnLoad函数内部有一个$(document).ready(function()？这对我来说似乎非常奇怪... - nurdyguy

1

花括号不平衡，这可能并没有起到帮助作用。 - Richard Poole

显示剩余4条评论

4个回答

2

尝试使用这个 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>

- joyBlanks

您不需要使用计数器（实际上，目前它无法工作），该函数仅在所有后代图像加载完成后调用一次。请查看文档。 - alex

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树，对于已经存在于浏览器缓存中的图像可能停止触发

- Arash Milani

我有这段图片代码：

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"; }

- 它们会与另一个存储图像的函数一起加载。 - Tiffany Haltom

0

只有在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>

- MaxZoom

请告知我是否有所帮助。 - MaxZoom

在我的情况下它不起作用，因为我只加载了一个图像，直到页面刷新，然后我再获取另一个，但非常感谢你！ - Tiffany Haltom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahs N · Accepted Answer

您的代码存在一些语法错误，我已经进行了更正，以下是修正后的代码：

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

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

这里是JSFiddle演示

。