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
5,771 PointsFetching 100 rows 2 times on one page for mobile devices then hiding half, taxing?
hi!
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-
Basically,
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?
1 Answer
Anthony Mejia
8,840 PointsI 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
5,771 Pointsoh right! Cool. I'll get right on it. Will leave answer here for others when it's finished. Thanks!
Petros Sordinas
16,181 PointsPetros Sordinas
16,181 PointsHi 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.