PDA

View Full Version : jQuery: duplicate .load() problems and image preloading



IanPatrickBuss
12-26-2009, 09:11 PM
I am having multi browser issues with a script I have created and have been working on for my new site.
http://screenr.com/dKS - is a most recent screencast of the problem and in a response to YayQuery's help...

http://screenr.com/OAS - is the first... with the most detail

I sent both of these to yayquery... and here is what they told me to do: (via twitter):
You need to do .load(fn).attr("src",newSrc); (load callback first).To cachebust image, do .attr("src",newSrc+"?"(+new Date))
----
Element Class Locations
.banner (the image at the top, right of the top dark grey menu, under the social media icons): In the videos it is listed as .header .text
.page (under the first block (with all the fiery edges... It houses all the content stuff, it is above the footer) In the videos it is listed as .content .text
::NOTE::
I switched .header .text and .content .text to .banner and .page to see if that would help a bit...
----
Problem: The problem is that when you try and look through my portfolio through each project's own page, the requested project isn't always loaded. The background piece always work, but, the content piece doesn't.

------
Observations: in firebug I see that the normal pages (home, services, contact...) each load the .banner and .page content once. The project pages it loads twice even though its called once and it says the function is called on line 19 represented below:
$(".banner").load("pages/" + href + "/header.php", function ()
This shouldn't even been running because its in a different if statement...

The full code:

$(document).ready(function()
{
$("a").click(function()
{
var href = $(this).attr("href").replace(/#/g, "");//Takes out the # in the href
var idLink = $(this).attr("id");
var idPage = $(".banner img").attr("id");
if(idLink=="page" && idPage=="page") //Normal Pages
{
$(".banner").fadeOut("slow", function ()
{
$(".header .loader").fadeIn("slow");
$(".page").animate({opacity: 0}, "slow", function ()
{
$(".page").slideUp("slow", function ()
{
$(".content .loader").fadeIn("slow", function ()
{
$(".banner").load("pages/" + href + "/header.php", function ()//Line 19
{
$(".page").load("pages/" + href + "/content.php", function ()
{
$(".page").css("opacity", 0);

$(".header .loader").fadeOut("slow", function ()
{
$(".banner").fadeIn("slow");
});
$(".page").slideDown("slow", function ()
{
$(".content .loader").fadeOut("slow", function ()
{
$(".page").animate({opacity: 1}, "slow");
});
});
});
});
});
});
});
});
}
else // Project
{
$("html, body").animate({scrollTop:0},"fast", function()
{
$(".wrapper").fadeOut("slow", function()
{
$("#total").text(0);
$(".transition").animate({top: "0px"}, "slow");
$(".whiteout").fadeIn("slow", function ()
{
$("#total").text(25);
$(".transition img").load(function()
{
$("html, body").css("background", "transparent url(pages/" + href + "/bg.png) top left");
$("#total").text(50);
$(".banner").load("pages/" + href + "/header.php?p=" + (Math.random()), function()
{
$("#total").text(75);
$(".page").load("pages/" + href + "/content.php?p=" + (Math.random()), function()
{
$("#total").text(100);
$(".whiteout").fadeOut("slow", function()
{
$(".wrapper").fadeIn("slow");
$(".transition").animate({top: "-130px"}, "slow");
});
});
});
}).attr("src", "pages/" + href + "/bg.png?p=" + (Math.random()));
});
});
});
}
});
});
Browser Compatibility: I know this error occurs in Chrome 4.0 and Firefox 3.5.5-3.5.6. I don't know about IE8 and IE7
I am using jQuery version 1.3.2
If you need to know anything else please don't hold back :p

I would like to thank you guys in advance!!!