0

My problem might be naive, but basically I have a simple Jquery script running on a site to determine the margin height of divs based on the contained image's height:

<script type="text/javascript"> 

 $('.artobject').css('margin-bottom',$('.img-wrap').height());

</script>

The problem is that it runs once, but after the page is reloaded the code begins working differently. I believe this is a cache issue, but honestly have no idea. i've tried various different cache clearing codes, but to no avail.

The site where this code is applied is http://jessiama.com/elzie/index.html.

Jema
  • 47
  • 1
  • 7
  • what all cache clearing techniques have you tried – Satya Jun 19 '15 at 03:48
  • 2
    What do you mean by "different"? – Bergi Jun 19 '15 at 03:49
  • 2
    It's easily possible that *images* inside `.img-wrap` affect the height of that element, and they will do different when they're already loaded (because cached) from when they're not loaded at the time of the measurement. Please show the whole code that is needed to reproduce this. – Bergi Jun 19 '15 at 03:50
  • in response to the cache clearing techniques i tried. I used variations of .ajax with jquery – Jema Jun 21 '15 at 01:27

1 Answers1

0

It could be your images aren't loaded by the time your code runs. Try putting your code in a window.load function and see if that works.

$(window).load(function() 
{
    $('.artobject').css('margin-bottom',$('.img-wrap').height());
});

</script>

Updated after Terry reminded me it wasn't document.ready.

nixkuroi
  • 2,259
  • 1
  • 19
  • 25
  • When the DOM is ready does not mean the image dimensions are already available or that the image(s) are loaded. – Terry Jun 19 '15 at 06:10
  • Yes. Assuming your images are regular old images and not loaded dynamically. – nixkuroi Jun 19 '15 at 06:15
  • 2
    No, that is incorrect. `$(document).ready()` only waits for the DOM to be fully loaded, *not* its resources. Read the [official docs](http://api.jquery.com/ready/), and other SO questions: [this](http://stackoverflow.com/questions/7587714/image-does-not-have-width-at-document-ready), [this](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin) and [this](http://stackoverflow.com/questions/2034810/jquery-document-ready-fires-too-early-for-my-requirements) – Terry Jun 19 '15 at 06:18
  • You're right... it's $(window).load that waits for images. – nixkuroi Jun 19 '15 at 06:22