Javascript Not Actually Calling The Function It Should?

hessmith · December 26, 2012

Hey, all!

This is my first post here, and I hope you guys can help. (I know it. :happy-04: ) I'm rather new to javascript, as I've been worked with PHP a lot more in the past, and I'm stuck on this one task. The thing is, it worked perfectly fine an hour ago. Everything was great, and now it gets stuck.

I've written a script to:

Search the document for img, script, and link tags and get the "source" value from that. I've set the attribute to be "source", so that they aren't automatically downloaded until the script tells them to download.
It then loads them via ajax and caches them.
It updates a <progress> bar and some text with Jquery.
It hides the progress bar and shows the content when it is done.

I don't know what I did, and I hope you guys can help.

Here's the javascript:

var items = [],
elements = [],
p = 0,
findRes = $.Deferred();

var findResources = function(element) {
$(element).find('img,link,script').each(function() {
 var url = "",
 type = $(this).get(0).nodeName.toLowerCase();

 if ($(this).css('background-image').indexOf('http://') > 0) {
 url = $(this).css('background-image');
 if(url.indexOf('url') != -1) {
 var temp = url.match(/url\((.*?)\)/);
 url = temp[1].replace(/\"/g, '');
 }	
 } else if ((type == 'img' || type == 'link' || type == 'script') && typeof($(this).attr('source')) != 'undefined') {
 url = $(this).attr('source');
 }

 var Ext = url.split(".").pop().toLowerCase();

 if(Ext=="js" || Ext=="css" || Ext=="png" || Ext=="jpg" || Ext=="jpeg" || Ext=="gif") skip = false;
 else skip = true;

 if (url.length > 0 && !skip) {
 elements.push($(this));
 items.push(url);
 }
});

num = items.length+2;
$("progress").attr("max",num).attr("value",0);
window.elements = elements;
console.log(items.length + " resources found");
findRes.resolve();
increaseProgressBar();
}

function loadResource(url) {
var resource = $.ajax(url).done(function() { console.log("preloaded: "+url)});
return resource;
}

function preload() {
return $.Deferred(function(def) {
findRes.done(function() {
setTimeout(function() {
 for (var i = 0; i < items.length; i++) {
 loadResource(items[i]).done(function() { def.notify(); });
 console.log("url("+i+"): "+items[i]);
 }
}, 10);
})
})
}

function increaseProgressBar() {
previous = Math.round((p/num)*100),
p++;

var percent = Math.round((p/num)*100);

increaseTextPercentage(previous,percent)

console.log("Progress "+p+"/"+num);

$("progress").stop().animate({
value:p,
},{duration:500, complete:function() {checkCompletion(percent)}});
}

function increaseTextPercentage(prev,next) {
$({value: prev}).animate({value: next}, {
duration:500,
step:function() {
$("#per").text(Math.ceil(this.value) + "%")
}});
}

function checkCompletion(percent)
{
if (p==(num-1)) {
for (var i = 0; i < window.elements.length; i++) {
$(elements[i]).attr("src",$(elements[i]).attr("source")).removeAttr("source");
}

increaseTextPercentage(percent,100);

$("progress").stop().animate({
value:num,
},{duration:500, complete:function() {

$("#preload").fadeOut(400);
$("#content").fadeIn(500);
console.log("preload complete");
}});
}
}

$(document).ready(function() {
findResources("html");
preload().progress(function(data) {
increaseProgressBar();
});
});

And here's the HTML in case it helps, though there's not much to is..

<body>
<div id="content" style="display:none">
<img source="images/IMG_0075.JPG">
<img source="images/IMG_0076.JPG">
<img source="images/IMG_0077.JPG">
<img source="images/IMG_0079.JPG">
<img source="images/IMG_0080.JPG">
<img source="images/IMG_0082.JPG">

<script type="text/javascript" source="js/js1.js"></script>
<script type="text/javascript" source="js/js2.js"></script>
<script type="text/javascript" source="js/js3.js"></script>
<script type="text/javascript" source="js/js4.js"></script>
<script type="text/javascript" source="js/js5.js"></script></div>

<link rel='stylesheet' source="css/fonts.css" type='text/css' />

<div id="preload"><div id="bar">Page is loading... (<span id="per">0%</span>)<progress>Loading...</progress></div></div>

Can anyone explain to me why the progress bar now gets stuck at approximately 54% (changes frequently)? If one looks at the JS console, it would appear that the increaseProgressBar function just isn't being called after about halfway, and so while the files preload, nothing else happens visually, but I can't figure out why it doesn't get called.

Thank you! I look forward to your help.

Hess Smith

Edited December 26, 2012 by hessmith

Sign In

Javascript Not Actually Calling The Function It Should?

Recommended Posts

hessmith

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information