1

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....

Devin
  • 7,405
  • 6
  • 35
  • 48
tika
  • 6,177
  • 2
  • 44
  • 78

4 Answers4

4

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

Community
  • 1
  • 1
3

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:

Display IMG test

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

Devin
  • 7,405
  • 6
  • 35
  • 48
1

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( );
    }
});
Ali Adel
  • 95
  • 1
  • 13
  • Again, the page has loaded and you then remove it, you don't save bandwidth. You should Just load the images via Ajax after the page has loaded with a width condition via ajax. I'm on my mobile atm otherwise I'd write an answer – Alex Sep 16 '14 at 23:03
  • 1
    your answer good and i hope tika update our solve to meet what he need – Ali Adel Sep 16 '14 at 23:05
0

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.

  • Thanks, I think I need to try myself. I just wanted to know if someone already did. Anyway, the idea seems cool. – tika Sep 16 '14 at 22:54
  • 2
    This won't work, I guess you pull all your content from the server on page load with php, then the render tree will draw the page, then you set the content of slideshow to empty. So although it appears you don't load the content, you still use the bandwidth. Why don't you create a jQuery script that checks the doc width on page ready and then requests the images using ajax? May be slower for desktop but reduces mobile bandwidth – Alex Sep 16 '14 at 22:59