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:

	//Just for adding images on page
    '); 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

    • Hanging menu on window scroll

      After scrolling window beyond menu height, a floating bar appears at the top having same menu inside it.

      • 369
      • 13
      • 369
      • facebook icon
      • twitter icon
      • google plus
    • Select all text on single click

      Text selection has been made easy

      • 232
      • 1
      • 232
      • facebook icon
      • twitter icon
      • google plus
    • Hacked by s4dness | ghost riddiculous team

      Visibility hidden and opacity zero, together can beat display none property, which gives height zero during run time.

      • 303
      • 7
      • 303
      • facebook icon
      • twitter icon
      • google plus

    Latest quries posted

    gopa kumarabout 4 years ago

    amit singhabout 4 years ago

    rahmat aliabout 4 years ago

    mandavi tiwariabout 4 years ago

    rahul sharmaabout 4 years ago

    Ask question
    Latest video
    Learn Angular
    Profile pic
    Guest Back