CODEWITHSUNDEEP
htmltwitter-bootstrapmobile
hmajid2301
hmajid2301

Reputation: 147

Web page crashes on mobile

Hello I'm new to web design,

I used twitters bootstrap to create a website. Everytime I try to load http://www.taekwondo.uwcs.co.uk/gallery.php on mobile (ios) the browser crashes (chrome) or runs very slowly on that page.

I was wondering how could I fix this issue (how to debug it). Do I have too many images on the page? Do I need to lower the quality of the images?

I'm using lazy loading the images using this plugin (http://www.appelsiini.net/projects/lazyload). Here is the html I have there are about 8 rows of images. 

   <div class="row">
     <div class="col-md-3">
       <img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
     </div>

     <div class="col-md-3">
       <img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
     </div>

     <div class="col-md-3">
       <img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
     </div>

  </div> <!-- End of row -->

jQuery on the page

 $(".img-responsive").lazyload();

Thanks in advance

Upvotes: 0

Views: 375

Answers (1)

busy man
busy man

Reputation: 97

The problem is that you load all the images at once because they are all in the viewport of the user if he opens the page. You should only load images which are currently visible for the user.

For that you can add a min-height (this is not the best solution for responsive websites) to your rows (e.g. min-height: 50px). A better solution is to load the first and maybe second row without lazy loading. The rest of the rows can be lazy loaded. Then the performance problem should be solved ;)

The second thing is, that I wouldn't use a jQuery plugin, because for a such tiny functionality like lazy loading you don't need such a big library which costs performance too.

I prefer a lightweight and more efficient plugin like justlazy. In the example you can see, that images are only loaded, if they are visible for the user. If you load your site, all images are loaded.

You can use justlazy as follows:

1. Define a placeholder:

<span data-src="path/to/image" data-alt="some alt text"
      class="justlazy-placeholder">
</span>

Good at this solution is also that google don't index your load-gifs. If you want to seo optimize it, you can use an img with a small image as src-attribute instead of the span for the placeholder.

2. Register lazy loading via javascript

Justlazy.registerLazyLoadByClass("css-class");

Upvotes: 1

Related Questions