homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Need help preserving js functions when accessing html through ajax
p3ngu1n




msg:4372307
 8:04 pm on Oct 8, 2011 (gmt 0)

I've searched a lot of forums for an answer to this and would like to apologize in advance if the answer seems fairly obvious to others and look toward everyone else's expertise to guide me through this problem.

The Problem:
My website currently loads all assets before anything is displayed. My navigation choice was to have divs hidden and revealed depending and what users clicked on but the content that was showed was always preloaded. This system worked great until I started uploading more content and the amount of data that viewers would have to download would cause the site to have a longer and longer load time.

The Solution:
I'm currently trying to have content loaded as people click around on the links instead of having everything on the site preloaded at the beginning. I looked for several ways of doing this and have narrowed it down to iFrames and AJAX. AJAX seems to be the prefered method by many since all the content is hosted in the same place and I'm not trying to access pages from external sites but the problem is that the content that I'm trying to display relies on other javascript (as you can see as you click from project to project).

I have been trying to use the solution presented here: [dynamicdrive.com...]

The tutorial listed says to use a "loadobjs()" function to load all the assets of the html page I'm trying to load, however, that solution isn't working with the nivo slider that I'm using to display my projects.

Now, I'm not a coding buff I do this for fun and for my own projects. I understand basic terminology but I'm far from being able to code any substantial JS on my own. I really need the help of this community.

You can view my website @ [dennytsai.com ]. If what I'm trying to do is not clear please let me know and I will do my best to help you understand my problem.

I'm not sure how things are normally done on the forums as I've just signed up. If I should be uploading my entire code for review I will do so. Any assets that the community needs I will try to oblige.

 

JAB Creations




msg:4372386
 1:53 pm on Oct 9, 2011 (gmt 0)

The image at /photo_thumb2.jpg I was able to knock down FROM 6,999 bytes to 2,013 bytes using 16 colors / indexed colored GIF with very little image degradation in Photoshop's Save for web... dialog. You might be able to knock that down even further with some super-fancy PNG compression that isn't available in Photoshop though I'd highly recommend posting in the graphics forum for that. The under construction image is 81KB, a 32 color indexed colored GIF would knock it down to 26KB.

I posted a tutorial that you can read in-depth here...
[webmasterworld.com...]

Secondly and this is what you should really be doing is getting rid of jQuery and not replace it with some other framework. Use real JavaScript code. It's 91 kilobytes which is absolutely asinine, you could get your entire site to load in under 91 kilobytes if you follow my advice. Some people will downplay this point though I've only found negative points and no positives. Everything you are using jQuery already exists so rip out all that junk and start adding 'javascript' to the beginning of your searches and '-jquery' to the end of your searches. The best reason? If every smoe is doing it and you're not then you have greater value than they do. My entire site loads in half the bandwidth of jQuery itself (and only a third of the version you're using).

What would really help you out as well is not loading everything and forcing the user to wait. You load 22 megabytes...holy crap dude! Only load what the user will initially see. Once everything is loaded then you can concentrate on caching in the background if you want. Don't think Windows Vista/7 and force load everything in existence expecting the user to go through it all, do computing the right way and only load what the user needs up front.

Get yourself a copy of Fiddler (version 2.2.9.1 or older, Microsoft has lost all of their marbles and are intentionally making their software more difficult to use so search on "old version" websites). You can use it to load your site (be sure to empty the cache before you load) and see what is being transferred.

You are running your site local on your computer, making changes, debug and once things work smoothly then commit/upload your changes, correct? It's exceptionally unprofessional to work on a live site without first ensuring changes work, make sure you're working locally first, I recommend getting a copy of XAMPP, it's very easy to get things running quickly.

As far as loading JavaScript what I do for my site to maintain the lowest possible entry barriers bandwidth wise (it's very friendly to folks on dial-up and mobile and loads a lot of stuff though only ondemand) is load script files that features that aren't likely to be used by most users. That's subjective for any site but it basically works by creating a script element. It pings the typeof function that you want to use to initialize once the script is loaded and once the typeof returns as a 'function' it then calls the function.

- John

// Example usage...
// ondemand('site-editor','site_editor_1_events');
// loads "scripts/site-editor.js"
// combined with base element on my site

function ondemand(url,f)
{
if (eval('typeof ' + f)=='function') {eval(f+'();');}
else
{
var js=document.createElement('script')
js.setAttribute("defer","defer")
js.setAttribute("src",'scripts/'+url+'.js')
js.setAttribute("type","text/javascript")
document.getElementsByTagName('head')[0].appendChild(js);
setTimeout(function() {ondemand_poll(f,0);},'100');
var t = document.createTextNode('\n');
document.getElementsByTagName('head')[0].appendChild(t);
}
}

function ondemand_poll(f,i)
{
if (i<100) {setTimeout(function() {if (eval('typeof ' + f)=='function') {eval(f+'();');} else {i++; ondemand_poll(f,i);}},'100');}
else {alert('Error: could not load \''+f+'\', please check your internet connection.');}
}

p3ngu1n




msg:4372410
 5:31 pm on Oct 9, 2011 (gmt 0)

What would really help you out as well is not loading everything and forcing the user to wait. You load 22 megabytes...holy crap dude! Only load what the user will initially see. Once everything is loaded then you can concentrate on caching in the background if you want. Don't think Windows Vista/7 and force load everything in existence expecting the user to go through it all, do computing the right way and only load what the user needs up front.


I think this is the most relevant statement that you've made to my original post. that's exactly what I want to do! the bulk of my site is actually the project images that are revealed when you click the links on the bottom of the site.

While I admit that dropping a image size from almost 7mb to just under 2mb is impressive (especially if there is little image degredation) I don't believe that is the core of my problem.

You're right, I should load only what the user will initially see. That's what I'm asking help to do. I want the project to load on the fly when the links on the bottom are clicked on rather than having the user wait for everything to preload before hand. This is why I wanted to use the AJAX plugin that I mentioned earlier to load separate html into a div. The problem that I'm running into is that the ajax html swap is messing up my js functions for the image slider when the page is loaded.

You are running your site local on your computer, making changes, debug and once things work smoothly then commit/upload your changes, correct? It's exceptionally unprofessional to work on a live site without first ensuring changes work, make sure you're working locally first, I recommend getting a copy of XAMPP, it's very easy to get things running quickly.


Yes I am. I'm using the latest version of dreamweaver on all local files. Only when I've tested everything in ff, ie, and chrome do I finally upload it onto my main server.

I should probably also mention that my main focus is on industrial design and my intended audience should not be using dial up. Image fidelity is much more important to me than compression. This website is made so that potential employers can see what they're getting if they hire me, not to show off my coding prowess (or lack there of).

Thanks

p3ngu1n




msg:4374159
 8:40 pm on Oct 13, 2011 (gmt 0)

bump

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved