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

    • Before and after vs empty tag

      Adding before and after to an non container element is no possible.

      • 7
      • 1
      • 7
      • facebook icon
      • twitter icon
      • google plus
    • Copy text to clipboard

      Copy text from browser to your clipboard and paste as per your requirement.

      • 290
      • 2
      • 290
      • facebook icon
      • twitter icon
      • google plus
    • Javascript drag and drop

      Very light script for dag and drop

      • 327
      • 5
      • 327
      • 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