render only the content on a page that is currently visible

Question

I have a web page that displays a list of testimonials along with an <img> tag beside each entry.

It looks like this:

<table> 
 <tr>
  <th>
  Name
  </th>
  <th>
  Testimonial
  </th>
  <th>
  Subject
  </th>
 </tr>

 <tr>
  <td>
  Joe Blow
  </td>
  <td>
  I had a great stay...
  </td>
  <td>
   <img src="..." />
  </td>
 </tr>
...
</table>

Basically this can serve up to 100 entries at once and it freezes up the browser very often - particularly because I probably haven't totally optimized all the imgae file sizes and some of them are more than 1MB.

What I would like to find out is how I can make it so the <img> tag doesn't render into the browser until the end-user scrolls and it becomes visible in their viewport.

This would save a lot of cost on my server and also not freeze up all my user's browsers.

Anybody have any ideas?

are you generating the content dynamically (PHP) or just static HTML page? — Jordan Davis, Aug 29 '15 at 23:12
Why don't you look at reducing the filesize of the images? > 1mb sounds like way too much for a testimonial's image, how big are they (dimension wise)? — billyonecan, Aug 29 '15 at 23:18
Thanks guys. To answer, it is dynamic (PHP). The answer below (jQuery Lazy Load) is perfect and exactly what I needed! — Walker Farrow, Aug 30 '15 at 02:51

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

You could bind events to the img tags that are triggered when they are being displayed in viewport. You could use this solution to do this: jquery trigger function when element is in viewport

So when the event is triggered you just have to use .setAttribute to set the src attribute of the img tag.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 29 '15 at 23:16

Lucas Piske

370
2
16

score 1 · Accepted Answer · answered Aug 29 '15 at 23:43

What you are trying to accomplish is called Lazy Loading, and i believe there are several tools or js libraries for this on the internet.

Now, for the drawback of this functionality, i would say that being on a mobile phone, the internet is not fast, and at first the user might have some issue viewing the pictures, as they will be downloading.

But this is up to you.

Hope this helps.

Links:

Lazy Loading css-tricks.com

jQuery Unveil

jQuery Lazy Load

render only the content on a page that is currently visible

2 Answers2