JavaScript - Pre-loading Images

Hello. I've recently implemented this really cool jQuery preloader called queryLoader. When a visitor comes to my site they are fed all the important images for the entire site (it's a very small site). During that time queryLoader shows a percentage loading animation, and once all the images are loaded it wipes the screen & displays the website.

I've placed another custom animation in the "page loading" div, and i want to make sure it loads first so that it is displayed while the rest of the images get downloaded. I've tried pre-loading with javascript as the very first script in my header, before jQuery or queryLoader get loaded, like this:

Code:

<script type="text/javascript">
     pic1= new Image(250,300); 
     pic1.src="images/page_loading.gif"; 
</script>
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/queryLoader.js"></script>

However, this doesn't seem to be that effective. When i clear browser cache and reload the page, the page_loading.gif sometimes doesn't appear until the site is almost completely loaded. Is there a more effective way to assure the page_loading.gif gets loaded before any other images?

My site is jugtones.com if that helps in any way. Thanks for your time, -Scott

Greetings,

I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious.

I would like the display an image within a 100 x 100 pixel container.

If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container.

I want to avoid pixelation of the images as much as possible.

All images are external and not on the local server so I only have an image URL.

I would like to hide all images until they are resized appropriately.

Does anybody know of a piece of javascript code that can do something similar to this?

Sincerely,
Travis Walters

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

Hey everyone!

I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click.

I've uploaded the progress he
http://www.aldousmassie.com/newprogress

I'm using this code at the moment to scroll through the background:

Code:

<!-- SCRIPT FOR CHANGING BG ON CLICK -->

<script type="text/javascript">
					imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==3) {
x=-1;
}
}

if (!imgs[x+1]) {
x=-1;
}
</script>
					
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->

<script type="text/javascript">
					imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");

var x=0;

function change() {
					document.getElementById("bgimg").src=imgs[++x];

if (x==5) {
x=-1;
}

}

if (!imgs[x+1]) {
x=-1;
}
</script>

Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick?

I'd appreciate any tips that point me in the right direction. Thank you.

Hi there,

I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help.

All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that.

What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones.

It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them.

I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images.

I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image.

Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time.

Hi everyone,

I am having trouble getting a loading bar to appear from my javascript.

I have the following code in place

Code:

$(document).ready(function(){
 $(window).scroll(function(){

  var h = $('#footer').height();
  var y = $(window).scrollTop();
  if( y > (h*0) && y < (h*1.0) ){

	  $('#loading').fadeIn("slow");
	   $('#loading').delay(10000).fadeOut();

   $("#portfolios").delay(1000).fadeIn("slow");
  
  }
 });
})

I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears...

The loading bar 'gif' is in the 'loading div id'.

There is a 'display:none;' in the css on the loading div and the portfolios div.

Any reason why the 'loading' div doesn't display but the portfolios does?

I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page.

Any help would be appreciated!

Thank you!

Hi there,

Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'.

What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly.

Does anyone have any idea how to do this? Any help would be greatly appreciated.

Cheers,

Tom.

hello,

I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help.

First - I can get the ads to load using vanilla javascript with the code below.

Code:

    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos);
    var ifrmId = "ifrm_" + uniqid();
    ifrm.setAttribute("id", ifrmId);
    ifrm.setAttribute("marginwidth", 0);
    ifrm.setAttribute("marginheight", 0);
    ifrm.setAttribute("frameborder", 0);
    ifrm.setAttribute("scrolling", 0);
    ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight));
    ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth));
  

    container.appendChild(ifrm);

But since the site is using jquery I wanted to develop it out that way. So I have the following code,

Code:

iRandom = oas.uniqid();
sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query;

						
$('<iframe />', {
  src: sAdURL,
  id:   sPos
}).appendTo(thisAd);

I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects.

So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful.

Thanks

I have nearly successfully implemented a gallery using Backbox:
http://www.javascriptkit.com/script/...ox/index.shtml

However, when I test it in IE (7 & 8), it looks like it's invoking the javascripts and loading the large image from the thumbnail link, but then it just hangs up on the loading waiting to get the image. Does anyone know how to fix this? Thanks.

Is there a way to tell Javascript to load data or a php file the re-direct to that page?

Right now i have a script that will re-direct when a user comes to the page. It waits about 5 seconds to give it time. I wanted to know if there was a way to load it with JS or AJAX.

Thanks for any help.

Can someone please show me a working example of how to load a WebPage from an existing WebPage using Javascript! I have tried googling the syntax and not having any luck.

Thanks,

Blake

I have an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html
Thank you for your help in advance.

for some reason I can't get this code to load...

Code:

<script type="text/javascript">

alert("test");
windowBody = document.getElementById("windowBody");
windowBody.style.height = (frameHeight - 250) + "px";

</script>

that should load when it loads the file foot.php

foot.php should be included onto the bottom of all of my labs (and it is)

my labs are opened up with Ajax...

but the script its not loading at all...

someone help =[

the web site is
http://opentech.durhamcollege.ca/~in...rittains/labs/

sorry for the poor description I'm having a hard time describing this error lol

Right,

I've been searching for a few days now and i'm looking for a AJAX/JQuery script where i can load external content in to a div.

I've seen a few site's that have it, and im after it so when i click the page link it loads it in the address bar like this
http://www.google.co.uk/#content/index.php

or what ever.

Thanks.

The Website: http://hudson.zzl.org

The CSS: http://hudson.zzl.org/galleria.classic.css

The JavaScript: http://hudson.zzl.org/galleria.js

The problem:

a. first load = nothing shows up
b. upon refresh everything loads very quickly and is fine.

Ill explain my other loading problems once I can figure out how to fix this problem.

Help please!