Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Jonathan Söder
Jonathan Söder
5,771 Points

Fetching 100 rows 2 times on one page for mobile devices then hiding half, taxing?


I'm currently thinking how to solve a problem I'm having. I have a page called top 100. On mobile devices it's horrible, because I currently have 2 movie posters per row. I am happy with the poster size on other pages. The problem only arises on the top100 page because it creates 50 rows and A LOT scrolling for the user. Which is bad.

What I want is a more compact view without posters on mobile devices. Leave out the posters and only echo one title and its score per row on mobile devices.

Since PHP is serverside I feel limited in what I can do to solve the problem because the problem lies in detecting user device/resolution. As of now I've "solved it" in a dirty ugly way, using bootstraps xs-visible.

What it solves is that it'll get rid of the posters and the scrolling. But it's not very elegant since it is only HIDING the code containing 100 posters.

Also does two queries instead of one, regardless of device,

query 1: fetches poster, title and score. -only visible on tablets and larger-

query 2(specifically for mobile): fetches title and score. -only visible on mobile devices-

I'm fetching 200 rows and hiding half of them. Is this taxing on older/newer mobile devices?

I'm really looking for one page of 100 titles. Right now I don't want any page system and if I make the posters smaller to fit 3-4 per row you can't even make out what you're clicking on.

Is this viable in any way or am I going to have to get into pagination?

Petros Sordinas
Petros Sordinas
16,181 Points

Hi Jonathan,

When you say you execute two queries, one with the posters and one without: What do you mean by posters? Are they image links or blobs?

If they are just image links, there is no reason to do two queries.

On fetching 100 results: You might want to do a pagination system, but with ajax. Have a look at Infinite scroll http://www.infinite-scroll.com/ You set up a pagination system but tell the plugin which are the pagination elements. What you get as a result is similar to a twitter feed that loads data as you scroll down (without seeing tha pagination links). You set the number of items the plugin should preload before making the ajax call to your server side.

1 Answer

I was doing a little bit of brainstorming and thought of a possible solution that might solve your dilemma.

You can have the page load initially with just the movie titles and scores. Once loaded, you can check the user's width with JavaScript and if larger than 768px, you can make an AJAX request to load the images.

I think doing this will prevent mobile users from loading pictures they won't even see, and gives tablet/desktop users their desired layout.

Let us know if this works!

Jonathan Söder
Jonathan Söder
5,771 Points

oh right! Cool. I'll get right on it. Will leave answer here for others when it's finished. Thanks!