Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Loading Certain Images before website loads?

    Hi Currently my website waits till all images are loaded up first:

    Code:
    $(document).ready(function(){
    
    	* LOAD UP ALL THEM IMAGES FIRST... *
    
    $(window).load(function() {
    	letsLoad();
    	fadingEffects();
    });
    However my website now has over 200 images on the website and now its taking way too long to load the images.

    My question's are:

    1. Is it possible to either load the site when its around 20% or even 50% loaded?

    OR

    2. If its possible to give certain images a tag?? and when these images are loaded then the site loads?

    Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds

    http://www.arcvizio.co.uk/ovoma/2/index.html


    Thanks
    Last edited by CSSkix; 10-03-2011 at 03:33 PM.

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CSSkix View Post
    Hi Currently my website waits till all images are loaded up first:

    Code:
    $(document).ready(function(){
    
    	* LOAD UP ALL THEM IMAGES FIRST... *
    
    $(window).load(function() {
    	letsLoad();
    	fadingEffects();
    });
    However my website now has over 200 images on the website and now its taking way too long to load the images.

    My question's are:

    1. Is it possible to either load the site when its around 20% or even 50% loaded?

    OR

    2. If its possible to give certain images a tag?? and when these images are loaded then the site loads?

    Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds

    http://www.arcvizio.co.uk/ovoma/2/index.html


    Thanks
    Anyone? Have i not given enough information? Wrong category? I am a beginner with JS... any help or direction would be helpful as the site is taking nearly 2 minutes to load and no one is going to wait around that long.

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    I tried your site, and it basically hung Firefox/Firebug, so it was hard to tell what's going on. But loading 200 images - yikes! Are these all images that need to be displayed on your home page? I'd make darn sure they are thumbnail images, and even at that 200 of them is a fair load.

    I'm sure there's a method you could use to just select out some of them to load, but I'm not really a JS person so hopefully someone can help. You might post the JS code you're using to do the pre-loading.

    Me, I don't pre-load images at all on my photography site.

    Dave

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Hi thanks for the reply its not 200 its around 60 images but the thing is the images fill the background as its a portfolio site.

    I would be happy if just the main images load first then the others while the user browses.

    Ive attached the JS code:-

    Code:
    
    // ALRIGHT
    $(document).ready(function(){
    
    	* LOAD UP ALL THEM IMAGES FIRST...                                 *
    
    	$(window).load(function() {
    		lets****ingParty();
    		slipNslide();
    
    	});
    		
    	function lets****ingParty(){
    
    		
    		// SLIDE EM ON IN!
    		$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
    		$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    		
    		// SHOW 'N' HIDE THE MENU
    		$('#menu').toggle(function(){
    			$('#vertCon').stop().animate({width:'215px'}, 666, 'easeInOutExpo');
    			$('#rightSide').stop().animate({left:'295px'}, 666, 'easeInOutExpo');
    			$('#closeBox, #closeGrave').css({'left':'295px'});
    			$('.infoArea, #graveArea').css({'left':'375px'});
    		}, function(){
    			$('#vertCon').stop().animate({width:'0px'}, 666, 'easeInOutExpo');
    			$('#rightSide').stop().animate({left:'79px'}, 666, 'easeInOutExpo');
    			$('#closeBox, #closeGrave').css({'left':'79px'});
    			$('.infoArea, #graveArea').css({'left':'159px'});
    		});
    		
    	
    		// PROJECTS INFO BOX
    
    		$('#plus').click(function(){
    			$('#infoBox, #closeBox').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    			$('#leftSide').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
    			$('#rightSide').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
    			$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
    		});
    		$('#xxx').click(function(){
    			$('#infoBox, #closeBox').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
    			$('#leftSide, #rightSide').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    			$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
    		});
    	
    	
    		// GRAVE INFO BOX
    		$('#logoWrap').click(function(){
    			$('#graveBox, #closeGrave').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    			$('#leftSide').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
    			$('#rightSide').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
    			$('#bground').stop().fadeTo(1349, '0.94', 'easeInOutExpo');
    		});
    		$('#xxxGrave').click(function(){
    			$('#graveBox, #closeGrave').stop().animate({top:'-200%'}, 1349, 'easeInOutExpo');
    			$('#leftSide, #rightSide').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    			$('#bground').stop().fadeTo(1349, '0', 'easeInOutExpo', function(){ $(this).hide(); });
    		});
    	
    /*LARGE SCREEN BACKGROUND FULLSCREEN*/
    
    		var fsImg = $('.slideImg');
    		var startwidth= 64; 
    		var startheight= 39;
    		var ratio = startheight/startwidth;
    		var imagewidth = $(this).width();
    		var imageheight = $(this).height();
    		var browserwidth = $(window).width();
    		var browserheight = $(window).height();
    	
    		function fillerup(){
    			
    			if ((browserheight/browserwidth) > ratio){
    				fsImg.height(browserheight);
    				fsImg.width(browserheight / ratio);
    			} else {
    				fsImg.width(browserwidth);
    				fsImg.height(browserwidth * ratio);
    			};
    		
    			// CENTER IMGS VERTICALLY + HORIZONTALLY
    			fsImg.css('left', (browserwidth - fsImg.width())/2);
    			fsImg.css('top', (browserheight - fsImg.height())/2);
    			
    			// SMALL-*** SCREEN ALERT
    			if ((browserheight <= 480) || (browserwidth <= 860)) {
    				$('#smallScreenCon').stop().animate({top:'0%'}, 666, 'easeInOutExpo');
    			} else {
    				$('#smallScreenCon').stop().animate({top:'-100%'}, 666, 'easeInOutExpo');
    			};
    	
    		};
    	
    		$(window).resize(function(){	
    			imagewidth = $(this).width();
    			imageheight = $(this).height();
    			browserwidth = $(window).width();
    			browserheight = $(window).height();
    			fillerup();
    			$('#thumbCon').stop().animate({top:'0px'}, 1349, 'easeInOutExpo');
    			
    			
    			
    		});
    	
    		fillerup();
    	
    		// ROLL 'EM UP
    
    		$('.hovUp').hover(function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({top:'-39px'}, 200);
    		}, function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({top:'0px'}, 200);
    		});
    	
    	
    		// ROLL 'EM DOWN
    		$('.hovDown').hover(function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({top:'0px'}, 200);
    		}, function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({top:'-39px'}, 200);
    		});
    	
    	
    		// ROLL 'EM LEFT
    		$('.hovLeft').hover(function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({left:'-39px'}, 200);
    		}, function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({left:'0px'}, 200);
    		});
    	
    	
    		// ROLL 'EM RIGHT
    		$('.hovRight').hover(function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({left:'0px'}, 200);
    		}, function(){
    			var thisBlock = $(this);
    			var thisRoll = thisBlock.children('.aBlock');
    			thisRoll.stop().animate({left:'-39px'}, 200);
    		});
    	
    	
    		// LOGO ROLL
    		$('#logoWrap').hover(function(){
    			$('#graveicon').stop().animate({top:'-39px'}, 200);
    			$('#grave').stop().animate({top:'0px'}, 200);
    		}, function(){
    			$('#graveicon').stop().animate({top:'0px'}, 200);
    			$('#grave').stop().animate({top:'-39px'}, 200);
    		});
    		
    	};
    	
    	/*here we have the effects and controls*/
    	
    	
    	function slipNslide(){
    	
    		// HI. WE ARE GLOBAL VARS. CARRY ON...
    		var inmotion;
    		var prevIndex;
    	
    	
    		// CLICKS FOR NEXT/PREV PROJECTS
    		$('.navBlock.down').click(nextProj);
    		$('.navBlock.up').click(prevProj);
    	
    		// CLICKS FOR NEXT/PREV SLIDES PER PROJECT
    		$('.navBlock.right').click(nextSlider);
    	    $('.navBlock.left').click(prevSlider);
    	
    		// KEYBOARD CONTROLS
    		$(document).keydown(function(e){
    		
    			var keyCode = e.keyCode || e.which,
    		    	arrow = {sleft:37, sright:39, sup:38, sdown:40};
    
    		  	switch (keyCode) {
    		    	case arrow.sleft:
    		      		prevSlider();
    					if(inmotion) return false;
    		    	break;
    			    case arrow.sright:
    			      	nextSlider();
    					if(inmotion) return false;
    			    break;
    				case arrow.sup:
    		      		prevProj();
    					if(inmotion) return false;
    		    	break;
    				case arrow.sdown:
    			      	nextProj();
    					if(inmotion) return false;
    			    break;
    		  	};
    	
    		});
    	
    	
    	
    	
    		// SET INITIAL PROJECT TO BE ACTIVE
    		if ($('#slideCon .activeProj').length == 0) $('#slideCon > div:first').addClass('activeProj currentProj');
    		if ($('#thumbCon .curThumb').length == 0) $('#thumbCon > li a:first').addClass('curThumb');
    		$('#infoBox > section:first').show();
    	
    	
    		// NEXT PROJECT
    		function nextProj() {	
    		
    		    if(inmotion) return false;
    			else inmotion = true;
    		
    			var activeproj = $('.activeProj');
    			activeproj.removeClass('currentProj');
    			activeproj.stop().animate({'top':'-100%'}, 1349, 'easeInOutExpo', function(){
    				activeproj.removeClass('activeProj');
    				$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
    				prevproj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
    				reSetter();
    				inmotion = false;
    			});
    	
    		    if (activeproj.length == 0) activeproj = $('#slideCon > div:last');
    			
    		    var nextproj = activeproj.next().length ? activeproj.next() : $('#slideCon > div:first');
    		    var prevproj = nextproj.prev().length ? nextproj.prev() : $('#slideCon > div:last');
    		
    			$('.prevProj').removeClass('prevProj');
    			prevproj.addClass('prevProj');
    		
    		    nextproj.css({'top':'100%'}).addClass('currentProj');
    			nextproj.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
    				nextproj.addClass('activeProj');
    			});
    		
    			// SYNC UP THUMBS ON VERTICAL MENU
    			var curLink = nextproj.attr('id');
    			var thisNewLink = $('a[data-target="'+curLink+'"]');
    			var thumb = $('.thumbImg');
    			var thumbImg = $('.thumbImg img');
    		
    			thumbImg.stop().animate({opacity:1}, 200);
    			thumb.removeClass('curThumb');
    			thisNewLink.addClass('curThumb');
    			$('.curThumb img').stop().animate({opacity:0.20}, 0);
    			thumbOvers();
    		
    			setIndex();
    		
    			// SYNC UP THE BLAH BLAH BLAH...
    			var blah = $('.theBlah');
    			var thisNewBlah = $('.'+curLink);
    		
    			blah.fadeOut(666, 'easeInOutExpo');
    			thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
    		
    			reSetter();
    
    		};
    	
    		// PREV PROJECT
    		function prevProj() {
    		
    			if(inmotion) return false;
    			else inmotion = true;
    	
    			var activeproj = $('.activeProj');
    			activeproj.removeClass('currentProj');
    			activeproj.stop().animate({'top':'100%'}, 1349, 'easeInOutExpo', function(){
    				activeproj.removeClass('activeProj');
    				$('.prevProj').children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
    				prevproj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
    				reSetter();
    				inmotion = false;
    			});
    	
    		    if (activeproj.length == 0) activeproj = $('#slideCon > div:first');
    		
    		    var nextproj =  activeproj.prev().length ? activeproj.prev() : $('#slideCon > div:last');
    		    var prevproj =  nextproj.next().length ? nextproj.next() : $('#slideCon > div:first');
    	
    			$('.prevProj').removeClass('prevProj');
    			prevproj.addClass('prevProj');
    
    			nextproj.css({'top':'-100%'}).addClass('currentProj');
    			nextproj.stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
    				nextproj.addClass('activeProj');
    			});
    		
    			// SYNC UP THUMBS ON VERTICAL MENU
    			var curLink = nextproj.attr('id');
    			var thisNewLink = $('a[data-target="'+curLink+'"]');
    			var thumb = $('.thumbImg');
    			var thumbImg = $('.thumbImg img');
    		
    			thumbImg.stop().animate({opacity:1}, 200);
    			thumb.removeClass('curThumb');
    			thisNewLink.addClass('curThumb');
    			$('.curThumb img').stop().animate({opacity:0.20}, 0);
    			thumbOvers();
    		
    			setIndex();
    		
    			// SYNC UP THE BLAH BLAH BLAH...
    			var blah = $('.theBlah');
    			var thisNewBlah = $('.'+curLink);
    		
    			blah.fadeOut(666, 'easeInOutExpo');
    			thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
    		
    			reSetter();
    
    		};
    	
    
    		// NEXT SLIDE
    		function nextSlider() {	
    		
    		    if(inmotion) return false;
    			else inmotion = true;
    	
    			var currentslide = $('.activeSlide');
    			currentslide.stop().animate({'left':'-100%'}, 1349, 'easeInOutExpo', function(){
    				currentslide.removeClass('activeSlide');
    				inmotion = false;
    			});
    
    		    if (currentslide.length == 0) currentslide = $('.currentProj > div:last');
    		
    		    var nextslide = currentslide.next().length ? currentslide.next() : $('.currentProj > div:first');
    		    var prevslide = nextslide.prev().length ? nextslide.prev() : $('.currentProj > div:last');
    	
    			var slidecount = $('.control_count .cur_count').html();
    			currentslide.next().length ? slidecount++ : slidecount = 1;
    			if(slidecount < 10){
    				$('.control_count .cur_count').html('0'+slidecount);
    			} else if(slidecount >= 10){
    				$('.control_count .cur_count').html(slidecount);
    			};
    	
    			$('.prevSlide').removeClass('prevSlide');
    			prevslide.addClass('prevSlide');
    	
    		    nextslide.css({'left':'100%'});
    			nextslide.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
    				nextslide.addClass('activeSlide');
    			});
    		
    		};
    	
    		// PREV SLIDE
    		function prevSlider() {
    		
    			if(inmotion) return false;
    			else inmotion = true;
    	
    			var currentslide = $('.activeSlide');
    	
    			currentslide.stop().animate({'left':'100%'}, 1349, 'easeInOutExpo', function(){
    				currentslide.removeClass('activeSlide');
    				inmotion = false;
    			});
    	
    		    if (currentslide.length == 0) currentslide = $('.currentProj > div:first');
    		
    		    var nextslide =  currentslide.prev().length ? currentslide.prev() : $('.currentProj > div:last');
    		    var prevslide =  nextslide.next().length ? nextslide.next() : $('.currentProj > div:first');
    	
    			var slidecount = $('.control_count .cur_count').html();
    			currentslide.prev().length ? slidecount-- : slidecount = $('.currentProj > *').size();
    			if(slidecount < 10){
    				$('.control_count .cur_count').html('0'+slidecount);
    			} else if(slidecount >= 10){
    				$('.control_count .cur_count').html(slidecount);
    			};
    	
    			$('.prevSlide').removeClass('prevSlide');
    			prevslide.addClass('prevSlide');
    
    			nextslide.css({'left':'-100%'});
    			nextslide.stop().animate({'left':'0%'}, 1000, 'easeInOutExpo', function(){
    				nextslide.addClass('activeSlide');
    			});
    		
    		};
    	
    	/*RESET*/
    	
    		function reSetter(){
    		
    			// USE ACTIVE PROJECT TO DETERMINE ACTIVE SLIDE
    			if ($('.currentProj .activeSlide').length == 0) $('.currentProj > div:first').addClass('activeSlide');
    		
    			$('.activeSlide').css({'left':'0%'});
    		
    			var slidecount = $('.control_count .cur_count').html();
    			var slidetotal = $('.control_count .tot_count').html();
    			if(slidecount < 10){
    				$('.control_count .cur_count').html('0'+1);
    			} else if(slidecount >= 10){
    				$('.control_count .cur_count').html(1);
    			};
    			if($('.currentProj > *').size() < 10){
    				$('.control_count .tot_count').html('0'+($('.currentProj > *').size()));
    			} else if($('.currentProj > *').size() >= 10){
    				$('.control_count .tot_count').html($('.currentProj > *').size());
    			};
    		
    		};
    	
    		reSetter();
    
    
    	
    		$('.curThumb img').stop().animate({opacity:0.20}, 0);
    	
    		// THUMB HOVERS
    		function thumbOvers(){
    		
    			$('.thumbImg').hover(function(){
    				var thisThumb = $(this);
    				var thisImg = thisThumb.children('img');
    
    				if(!(thisThumb.hasClass('curThumb')) ){
    					thisImg.stop().animate({opacity:0.20}, 200);
    				};
    			}, function(){
    				var thisThumb = $(this);
    				var thisImg = thisThumb.children('img');
    			
    				if(!(thisThumb.hasClass('curThumb')) ){
    					thisImg.stop().animate({opacity:1}, 200);
    				};
    			});
    		
    		};
    	
    		thumbOvers();
    
    		// THUMB CLICKERS
    		$('.thumbImg').click(function(){
    		
    			if(inmotion) return false;
    			else inmotion = true;
    		
    			var thisThumb = $(this);
    			var thumb = $('.thumbImg');
    			var thumbImg = $('.thumbImg img');
    			var curLink = thisThumb.attr('data-target');
    		
    		
    			var eachProj = $('.eachProj');
    			var activeproj = $('.activeProj');
    			var nextProj = $('#'+curLink);
    		
    			var totProj = $('#thumbCon .thumbImg');
    	        var projCount = totProj.length;
    	        var curIndex = thisThumb.data('index');
    	        var nextIndex = curIndex + 1;
    	        if (nextIndex === projCount) { nextIndex = 0; }
    	        var nextStep = $(totProj[nextIndex]);
    
    			var blah = $('.theBlah');
    			var thisNewBlah = $('.'+curLink);
    		
    		
    			thumbImg.stop().animate({opacity:1}, 200);
    			thumb.removeClass('curThumb');
    			thisThumb.addClass('curThumb');
    			$('.curThumb img').stop().animate({opacity:0.20}, 0);
    			thumbOvers();
    	
    			// SET THIS PREVINDEX
    			prevIndex = prevIndex || 0;
    	
    			// IF ITEM CLICKED IS ABOVE CURRENT ITEM IN THE LIST, SLIDE NEXT PROJECT IN FROM BOTTOM
    	        if (prevIndex < curIndex) {
    				eachProj.removeClass('currentProj prevProj');
    				activeproj.stop().animate({'top':'-100%'}, 1349, 'easeInOutExpo', function(){
    					activeproj.removeClass('activeProj');
    					eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
    					eachProj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
    					reSetter();
    					inmotion = false;
    				});
    
    				nextProj.css({'top':'100%'}).addClass('currentProj');
    				$('.currentProj').stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
    					$(this).addClass('activeProj');
    				});
    			
    				blah.fadeOut(666, 'easeInOutExpo');
    				thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
    			
    				reSetter();
    	
    	        } else if (prevIndex > curIndex){
    				eachProj.removeClass('currentProj prevProj');
    				activeproj.stop().animate({'top':'100%'}, 1349, 'easeInOutExpo', function(){
    					activeproj.removeClass('activeProj');
    					eachProj.children('.eachSlideCon').removeClass('activeSlide prevSlide nextSlide');
    					eachProj.children('.eachSlideCon').not('.activeSlide').css({'left':'100%'});
    					reSetter();
    					inmotion = false;
    				});
    
    				nextProj.css({'top':'-100%'}).addClass('currentProj');
    				$('.currentProj').stop().animate({'top':'0%'}, 1000, 'easeInOutExpo', function(){
    					$(this).addClass('activeProj');
    				});
    			
    				blah.fadeOut(666, 'easeInOutExpo');
    				thisNewBlah.delay(400).fadeIn(666, 'easeInOutExpo');
    			
    				reSetter();
    
    	        } else { inmotion = false; };
    	
    			// COMPARE THESE TO INTIAL GLOBAL VAR
    	        //prevIndex = curIndex;
    			setIndex();
    		
    		});
    	
    		function setIndex(){
    			var curIndex = $('.curThumb').data('index');
    			prevIndex = curIndex;
    		};
    	
    	
    	
    		$('#sliderBox').mousemove(function(e){
    		
    			if($(this).height() < $('#thumbCon').height()) {
    				var distance = e.pageY - $(this).offset().top;
    				var percentage = distance / $(this).height();
    				var targetY = -Math.round(($('#thumbCon').height() - $(this).height()) * percentage);
    			
    				if(e.pageY < 157){
    					$('#thumbCon').stop().animate({top:'0px'}, 2000, 'easeOutCirc');
    				} else {
    					$('#thumbCon').stop().animate({top:targetY+'px'}, 2000, 'easeOutCirc');
    				};
    			};
    		
    		});
    		
    	};
    	
    });
    and in the HTML code to execute the loader:-

    Code:
    			<!-- LOADING BLOCK -->
    			<div id="loadCon">
    				<span class="navBlock loading"><img src="data/images/ajax-loader.gif" alt="" /></span>
    			</div>
    any way to get it to load certain images?

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yeah it is pretty much a terrible idea to load all of these images at once, they seem to be all jpegs at around 250kb each. Load the images as they are needed and be sure that cache control is set.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    It's easy enough to do this in standard JavaScript. Not sure about jQuery.

    In standard JS, you could easily specify just the main images to preload and then, when the page is fully loaded, call JS to start pre-loading the rest of them.

    But I don't even see a list of images in that JS code that was posted, so not sure where jQuery is extracting their URLs from in order to do the preload.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hi i think it is extracting it from here:-

    // SLIDE EM ON IN!
    $('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
    $('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    the #slidecon is linked to the html div id where the project images are loaded in the html

    Code:
    <div id="slideCon">
    		
    			<!-- PROJECT 1 Ali Sharaf-->
    			<div class="eachProj" id="proj1">
    				<div class="eachSlideCon"><img class="slideImg" src="data/ovomaimages/nsi/Ali Sharaf.PNG" alt="" /></div>
    					<div class="eachSlideCon"><img class="slideImg" src="data/ovomaimages/MIKLOS/Ali Sharaf/image1.jpg" alt="" /></div>
    						<div class="eachSlideCon"><img class="slideImg" src="data/ovomaimages/MIKLOS/Ali Sharaf/image2.jpg" alt="" /></div>				
    			</div>

    Is it possible to use the lazy load plugin for jquery im not too sure how to integrate it. Basically i think it works by loading what ever is on screen so if you scroll down then the images load.

    http://www.appelsiini.net/projects/lazyload

    DEMO

    http://www.appelsiini.net/projects/l...d/enabled.html

    anyone have experience in using this?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But see, that is *NOT* happening until *AFTER* the page is loaded. So that's not "preloading" at all. That's just loading images in order to use them in the animation.
    Code:
    	* LOAD UP ALL THEM IMAGES FIRST...                                 *
    	$(window).load(function() { /* this says "do this when the page is fully loaded" */
    		lets****ingParty(); /* so this isn't called until after the page loads */
    		slipNslide();
    
    	});
    		
    	function lets****ingParty(){
    		// SLIDE EM ON IN!
    		$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
                    /* and so this is just making sure the images are there before the animate starts */
    		$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    There's no reason you couldn't add *SEPARATE* code to preload *JUST* the needed background images before page load.

    But that code *CAN NOT* be triggered by window.onload. It has to just start running as soon as the JS code is encountered during the file processing of the HTML. In other words, it shouldn't be hooked to any even of any kind.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by coiner View Post
    Yeah it is pretty much a terrible idea to load all of these images at once, they seem to be all jpegs at around 250kb each. Load the images as they are needed and be sure that cache control is set.
    I have no idea what cache control is?


    Quote Originally Posted by Old Pedant View Post
    It's easy enough to do this in standard JavaScript. Not sure about jQuery.

    In standard JS, you could easily specify just the main images to preload and then, when the page is fully loaded, call JS to start pre-loading the rest of them.

    But I don't even see a list of images in that JS code that was posted, so not sure where jQuery is extracting their URLs from in order to do the preload.
    Can you give me an example on how normal JS code would do a list? Might have a go at integrating it somehow...

    Appreciated

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Lightbulb

    Quote Originally Posted by Old Pedant View Post
    But see, that is *NOT* happening until *AFTER* the page is loaded. So that's not "preloading" at all. That's just loading images in order to use them in the animation.
    Code:
    	* LOAD UP ALL THEM IMAGES FIRST...                                 *
    	$(window).load(function() { /* this says "do this when the page is fully loaded" */
    		lets****ingParty(); /* so this isn't called until after the page loads */
    		slipNslide();
    
    	});
    		
    	function lets****ingParty(){
    		// SLIDE EM ON IN!
    		$('#loadCon').stop().animate({top:'200%'}, 1349, 'easeInOutExpo');
                    /* and so this is just making sure the images are there before the animate starts */
    		$('#leftSide, #rightSide, #graveCon, #slideCon').stop().animate({top:'0%'}, 1349, 'easeInOutExpo');
    There's no reason you couldn't add *SEPARATE* code to preload *JUST* the needed background images before page load.

    But that code *CAN NOT* be triggered by window.onload. It has to just start running as soon as the JS code is encountered during the file processing of the HTML. In other words, it shouldn't be hooked to any even of any kind.
    I think it makes more sense adding separate code for the important background images and let everything else load whilst the user is browsing.

    I have given my images div ids and nav ids any chance i can use them to order what i want to load in a JS file by just listing them in order? Is this to do with DOM?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Code:
    <script type="text/javascript">
    /* any number of image urls...relative or absolute...with a comma after each except last */
    var preloads = [
         "images/abc.jpg",
         "images/def.jpg",
         "thumbs/foo.png",
         "http://www.anothersite.com/image/stealthis.jpg" 
        ];
    
    for ( var p = 0; p < preloads.length; ++p )
    {
        var image = new Image();
        image.src = preloads[p];
        preloads[p] = image; // replace just name with image object
    }
    ...
    Now, that *starts* the image loading process as soon as that <script> tag is enountered, presumably within the first few lines of the HTML.

    If all those URLs are *also* referred to in <img> tags in the rest of the HTML, then the browser still won't start the window.onload stuff until such images are fully downloaded.

    So you need to pick and choose.

    But you *can* have images in that array that are not also in <img> tags, and then they are indeed preloaded and will hopefully be ready for use when needed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    CSSkix (10-03-2011)

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I have given my images div ids and nav ids any chance i can use them to order what i want to load in a JS file by just listing them in order?
    See, the problem is that JS can't "see" ids until after the HTML element with that id is fully rendered by the HTML engine. Typically, this means that JS can't see (example) <div id="xyz"> until after the [b]</div>[/b that terminates the div is encountered.

    So that's why techniques that scan the DOM looking for images can't (in general) be used until the page is fully loaded. It's why you have to give a separate static list to JS to get started with, because the tags are perhaps milliseconds away from being accessible.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    CSSkix (10-03-2011)

  • #13
    New Coder
    Join Date
    Sep 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that i'll try and change it - hopefully improve load times and efficiency of code.

    thanks again


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •