In mobile sites, I am hiding the slideshow by using:
#slideshow{ display: none}
Do the image load and remain hidden or they do not load? Should I use server side PHP to avoid loading the image sources? If they load, what can I do to browse faster and to avoid more data streaming in Mobile devices?
Any comments and suggestions will be highly appreciated. I DO NOT want the site to look better in Mobile, I am aiming at making code perfect....
I think this depends on the Browser that defines to load/ not to load the images. Most modern browsers do so as to give better browsers experience. So as far as speed, images are loaded async. So, it rarely matters. But, As per data, If I were you, I would change in the PHP Script and get rid of it as you are concerned with better Web Structure. It may need a lot of effort, but it's better than Javascript which sometimes load after images.
This helps you to detect a mobile device in PHP: Simplest way to detect a mobile device
How about removing the content using jQuery like:
$("#slideshow").html("");
This makes the content nothing. But I am not sure if that does not stream. Since Javascript DOM is Dynamic, I think that must work. You can load high images and test the data used in browsing.
yes when you use #slideshow{ display: none} slideshow images loaded at mobile phone
yo avoid that in slideshow i suggest you use like:
$(document).ready(function(){
if ($(window).width() < 960) {
$("#slideshow").remove( );
}
});
To answer your questions:
Images load in MOST browsers. NOT ALL. In order to test, try this page with your browser and see the results:
What to do to avoid that: Besides the jQuery approaches, one common method in responsive design is to use DATA URI, like this:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
This has the advantage that you use less requests AND doesn't download unless it's on a visible element, so it's a win win situation