1

on order to save resource on the server I made the image view the same on all posts, and I want to change that image when the div appear to the user while scrolling the page down to save bandwidth. code: 

<div class="image_showen" s="">
  <a href="{link}" target="">
    <img src="images/defaultimage.jpg" alt="{thread_title}" />
  </a>
</div>

my question is how to detect that the div is on view port and passing it to the function which is send request to the server to get that image back .

Cœur
  • 37,241
  • 25
  • 195
  • 267
abdelbasset
  • 31
  • 1
  • 5
  • Does this help? http://stackoverflow.com/questions/6422561/measuring-the-window-offset Measure the y offset of the div and compare to the offset of the window? – Daniel Tate Nov 19 '14 at 18:06

1 Answers1

0

Found Appear Plugin. might work for you. When a specific div appeared to view then show the image. You don't need to go to server. just save the imagePath as hidden field and show once the div appeared.

After including the API you can easily write something like:

$('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport... so show the image you need...
});
Riad
  • 3,822
  • 5
  • 28
  • 39
  • i cant understand that plug can you explain little bit – abdelbasset Nov 19 '14 at 19:18
  • did you see the http://morr.github.io/appear.html - demo? – Riad Nov 19 '14 at 19:25
  • i use a lot of div on my page how the plugin will collect theses divs and what forma its using array or ?? – abdelbasset Nov 19 '14 at 19:49
  • give every div you need to use a common class like `img_div` and foreach img_div you will get a callback and access it throug `$(this)` .. look at the demo closely...here they use one single code and append all the sections... – Riad Nov 19 '14 at 19:54