0%

Hey! Do you have any query related to front end?

Sign in Sign up

Load images visible to user after page loadBack

This quiet often visitor face a problem of page loading and, images play very big role in delaying the loading of page. So this script will help you in making your page loading faster. This is due to post loading of images and, adding to this, load only those images which are visible to visitor. This reduces the downloading of bites. Visitors do not feel annoying in opening such pages having bundle of images.

Script added


Script Explained:

$(document).ready(function(){
	//Just for adding images on page
	$('body').append('
    '); for(var i=1; i<=108; i++){ //lrc is here to store the path of images $('ul').append('
  • '); } //Get height of window var win_h = $(window).height(); //Get scroll value var scrollVal = $(window).scrollTop(); //Call load images function loadImages(scrollVal, "ul li"); //Add window scroll function to load images on scroll var scrollStat; $(window).scroll(function(){ clearTimeout(scrollStat); scrollStat = setInterval(function(){ loadContent(); },200); }); $(window).resize(function(){ win_h = $(window).height(); loadContent(); }); function loadContent(){ scrollVal = $(this).scrollTop(); loadImages(scrollVal, "ul li"); } //Define loadImages function function loadImages(scrollAmount, imgCon){ //Call for each images available inside container $.each($(imgCon), function(){ //Get height of imageCon var imgCon_h = $(imgCon).height(); //Store lsrc in variable var src = $(this).attr('lsrc') ; //Check for src undefined or false if(typeof src !== typeof undefined && src !== false){ //Get op val of imgCon var topPos = $(this).offset().top; var onScreenVal = (topPos-scrollAmount); //Check if element in visible area if(onScreenVal >= -imgCon_h && onScreenVal < win_h){ //Create new image and Set src attr and addclass show var that = $(this); var img = new Image(); img.src = src; that.html(img); $(img).load(function() { that.children().addClass('show'); that.removeAttr('lsrc'); }); } } }); } });

    From 2nd to 7th line is just for adding loading.png images and adding "lsrc" attribute to "li". This could be static/dynamic on the page and

    Main function is "loadImages()", this takes two argument:

    1. Window scroll amount
    2. Object in which images are present.

    So you can call it like this: function loadImages(scrollAmount, imgCon){.....

    How to comment:

    • Create an account in discuss by clicking on login next to arrow.
    • Create password for discuss and varify your email id, through your mail.
    • Refresh page and comment.

    You might also like

    • Css3 solar system

      Css3 keyframe animation is an awesome feature, which facilitate us to animate element on the page.

      • 320
      • 13
      • 320
      • facebook icon
      • twitter icon
      • google plus
    • Image selection like checkbox

      Select your image like a checkbox with little jQuery

      • 378
      • 39
      • 378
      • facebook icon
      • twitter icon
      • google plus
    • How to get system ip through jquery or javascript ?

      This is not possible to access the IP address through javascript.

      • 0
      • 1
      • 0
      • facebook icon
      • twitter icon
      • google plus

    Latest quries posted

    gopa kumarabout 3 years ago

    amit singhabout 3 years ago

    rahmat aliabout 3 years ago

    mandavi tiwariabout 3 years ago

    rahul sharmaabout 3 years ago

    Ask question
    Latest video
    Learn Angular
    Profile pic
    Guest Back
    Username
    Password