Attach jquery call to image load

Question

I am attempting to incorporate a script (written by "dystroy" I believe) that centers an image vertically within a div with the overflow hidden. It works quite well but many of my images are dynamically loaded upon mouseover.

I need to find a way to call the script upon image load. It's been two days now and as JS/JQuery aren't my native language, I find my self here.

Can anyone suggest how I might get the following to fire on image load? Many thanks!

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
  $('.container').each(function () {
    var $img = $(this).find('img');
    $(this).scrollTop(($img.height() - $(this).height()) / 2);
    $(this).scrollLeft(($img.width() - $(this).width()) / 2);
  });
});
//]]></script>

This question is very similar to [this previous question](http://stackoverflow.com/questions/3537469/jquery-detect-when-image-has-loaded). The answer describes how to detect when an image has loaded, which you can then use to fire your event. — Josh Durham, Feb 21 '14 at 03:18
I think your question has already been answered here: [jQuery callback on image load (even when the image is cached)][1] [1]: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — Quinn, Feb 21 '14 at 03:18
Appreciate the suggestions! JPDurham, Quinn & clancer looking into them now — user3335446, Feb 21 '14 at 03:31

score 0 · Answer 1 · edited Feb 21 '14 at 03:49

Perhaps you could combine the load api (https://api.jquery.com/load/):

$("#book").load(function() {
  // Handler for .load() called.
});

with the event delegation to make it so that any new images loading inside one of your specified divs get an onload function applied to them (https://learn.jquery.com/events/event-delegation/):

// attach a delegated event
$("#list").on("click", "a", function(event) {
  event.preventDefault();
  console.log($(this).text());
});

score 0 · Answer 2 · edited Feb 21 '14 at 03:45

0

$(document).ready(... Will wait until everything on the page is loaded (including the images) before executing the function.

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){
  $('.container').each(function () {
    var $img = $(this).find('img');
    $(this).scrollTop(($img.height() - $(this).height()) / 2);
    $(this).scrollLeft(($img.width() - $(this).width()) / 2);
    });
});
//]]></script>

edited Feb 21 '14 at 03:45

astorije

2,526
2
24
39

answered Feb 21 '14 at 03:06

maxisme

3,420
4
37
82

I believe the images are dynamically loaded after the page which is the issue of this question, see my answer for how this can be resolved – clancer Feb 21 '14 at 03:07
Could you load the images before and hide them maybe? then do what I have done. – maxisme Feb 21 '14 at 03:10
Appreciated Maximilian but clancer is correct in that the script must be called upon image load. I have far too many images involved for preload. – user3335446 Feb 21 '14 at 03:18

Attach jquery call to image load

2 Answers2