javascript - Know offset of a div placed after lazy load images -

i have div wrapper in lazy load images present. have div below images , want make sticky.

<div id="somewrapper">     <img class="lazy" data-original="someimageurl"></img>     <img class="lazy" data-original="someimageurl"></img>    <img class="lazy" data-original="someimageurl"></img>    <img class="lazy" data-original="someimageurl"></img>    <div class="sticky">somecontents</div> <!-- want make sticky on scrool --> </div> 

in order make them sticky need offset of div. problem offset not fixed on page because of lazy load images keep pushing div downward. image heights unknown. no of images 4. tried using appear event on last load element not giving me accurate results. please me how solve problem. want offset of sticky div can make check on scroll event.

so, said, may have check if last image in set has been loaded, , check element's offset. here demo of how done. feel free adapt code suit needs.

//ref wrapper  var $wrapper = $("#somewrapper");  //ref last image in set  var lastimgsrc = $wrapper.find(" > img:last").attr("data-original");    var image = new image();  image.onload = function () {      //do on load...      var offset = $wrapper.find(".sticky").offset();      alert (offset.top);  }  image.onerror = function () {     //do on error...  }  image.src = lastimgsrc;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="somewrapper">      <img class="lazy" data-original="someimageurl" />      <img class="lazy" data-original="someimageurl" />      <img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-4.jpg" src="http://dreamatico.com/data_images/sea/sea-4.jpg" width="100%" />      <img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-3.jpg" src="http://dreamatico.com/data_images/sea/sea-3.jpg" width="100%" />      <div class="sticky">somecontents</div> <!-- want make sticky on scrool -->  </div>

hope helps.