Web page never stops loading - javascript

I'm currently working on a student project and I encounter an issue with my code. We built an e-doc which mixes video, images, sounds and texts datas about people working during the night.
It's made of HTML, Javascript and a bit of PHP to access a DB.
Recently we discovered that the page keeps loading infinitely when you arrive on the website... It brokes some of our JS code and we don't know how to identify the ressource that might be corrupted or so...
What can make a page load "forever" ? And what kind of tools (ie firebugg or the built-in chrome stuff) should we use to identify the problem ?
You can find our dev- version right here : http://mgprddev2012.dream-valenciennes.com
EDIT : PHP Error is now OK, i forgot to upload the newest version of the code on the dev platform.
Many thanks

You're not crazy - this page does indeed take a very, very long time to load.
If you look at the Network tab in Chrome Developer tools, you can see that there are a lot of images, audio files and video files loading up all at the beginning, and most of them are not visible right away. And some of them are very big. This is probably one of those situations where it's best to defer loading of most of these assets until you need to display them, or at the very least until after you've loaded the assets you need right away.
I recommend checking you YSlow, which is an auditing tool that will give you some tips on how to make your web page load faster and appear to load faster. The site also has some good tips and thorough explanations for why different strategies are effective.
A few hints for this particular page:
A lot of your images are pictures of text. Consider rendering these as actual html text. You can still modify the size of each letter with CSS, and you'll have the added benefit that Chrome will be able to translate the text for non-French-speaking users. You should be able to use CSS borders to get those lines around the text, or try SVG.
Your background image is 2.2 MB. That's quite big. Try saving it at a lower compression setting.
You have a bunch of icons in individual png files. Consider putting them all in in one file and display them as CSS Sprites.
There are several png files that look like they could be jpg's, except for the transparency. If you're feeling ambitious, you can make a jpg with the color channels on the left side, and the alpha channel rendered as grayscale on the right, and use canvas to composite them.
You also have a few png files containing sprites for animation. You can convert them to videos and try the same canvas trick as above. If you're willing to use WebGL, I have some code you can use.

Stops loading fine for me. Firebug will usually tell you if something is loading in the background. Look at the console area to see if any thing is stalling upon page load. Are you saying in it's current state it hangs, because for me it finished just fine.
In the console you can also see javascript errors that may cause things to not work properly.

In JavaScript console:
Uncaught TypeError: Cannot call method 'pause' of undefined debout.js:979
It says that debout.pop02 is not declared. Where do you initialize it?

Related

How to take a screenshot of a web page by using Javascript

I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.
Do any of you have an idea how to accomplish this either by using javascript/java/flash?
Any option will do as long as it works...
P.S. I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.
Thanks a lot!
Currently possible alternatives:
rasterizeHTML.js:
this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo:
http://cburgmer.github.io/rasterizeHTML.js/
Lively 3D:
On the tool's website you can find a demo as well and it is still supported and developed.
http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html
HTML2Canvas:
Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.
https://html2canvas.hertzen.com
Old-Answer:
I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.
In the end, I ended up using server side generation of screenshots with phantomjs. Found it the most reliable in my scenario and it takes pretty decent screenshots.

How can I make an html file that lists files in its directory?

Here is the problem I am dealing with:
There are very few windows programs that display animated .gif images at the correct frame rate. Probably because they all use the windows libraries (probably .net) to do this, and anyone who has tried viewing an animated gif in I.E. and found that it was playing WAY TOO SLOW knows that Microsoft failed on this spectacularly.
The web browser Chrome is one of the few programs for windows that always plays animated gif's at the correct framerate, so my solution is to create a stand-alone html document to open in Chrome, that can be dropped into a directory and opened in Chrome to thereby display all images in that directory and/or its sub-directories in a picture-viewer style.
So far, my document (gif_view.html) opens an image based on a hard-coded path/file name, zooms this image in/out with the up/down keys, and switches to other hard-coded images with the left and right keys.
What I want is for these image file names to not be hard coded. gif_view.html should use a script to find out what images and sub-directories are in the directory I placed it in, and cycle back and forth through them with the arrow keys. It should also eventually create a list of sub-directories and let the viewer browse them.
Unfortunately, I can't get it to do either of these things on its own, since (for security reasons) JavaScript has no way of looking up the contents of a directory.
Does anyone know of a way to do this? Perhaps another scripting language to handle the left/right keys? Or is there a way to programmatically read the directory with JS that I missed? Or has Microsoft FINALLY released a patch or something to fix the frame-rate problem?
Please keep in mind: this should be a STAND ALONE DOCUMENT with NO external dependencies. A user should just be able to drop in into a folder, open it with a browser, and watch the magic happen. If your solution involves anything outside of the document itself (like say installing Apache and some server-side script to do the file reading) then it is not a solution. I've already tried stuff like that myself. Such external solutions work, but they are each very clumsy for their own reasons.
If anyone has ideas, I'd be grateful.
Using Chrome's directory upload feature, this is a breeze. Firstly, put a file select field in your file's HTML code:
<input type="file" id="file_input" webkitdirectory="" directory="">
and then, when the user selects a folder using it, you can read stuff like this:
document.getElementById('file_input').addEventListener('change',function(e){
var gifs=e.target.files;
[].forEach.call(gifs,function(curGif){
var elt=document.createElement('img');
elt.setAttribute('src',(webkitURL||URL).createObjectURL(curGif));
document.body.appendChild(elt);
});
},false);
this doesn't have all the fancy stuff with the arrows, but it works: http://jsfiddle.net/markasoftware/m65u7/1/

All scripts AND libraries in ONE js script?

Ok so I am in the process of building my first Javascript 'framework' or 'bootstrap' which will be implemented in combination with a single pre-processed CSS file. I am gathering my favorite content slider, smooth scroller, content slideshow, parallax elements & bg-img, sticky elements, among a few more cutting edge navigational & UI based scripts (cross-browser/platform/device/viewport compatibility and performance). My problem is when constructing my demo page with all combined elements in place loaded and active on the page... well many seeem to require a different version of Jquery to be called in order to function properly. I have managed to get them to work properly while testing by carefully reordering the jquery librarys as they are called in the of the page. Now here is my (2) part question:
How do I get all my JQuery to work properly without loading multiple versions of it (one for each script almost)
I have a sample in my portfolio which I would love to use as the example. http://www.nicholasabrams.com/ (non mobile device version). In the src for that URL you will see only (1) js and (1) css - including the jquery libraries which are ALSO included in the single .js in the begining of the file. Please don't flame me, as I am asking for help. The link above works fine now (with apple as a slight exception)... but I am just trying to eliminate any bad practices I have as I have just started as a web developer at my first large company. Thanks!!
PS: Would post a snippet but its quite a large js file as you would imagine but if you will, please inspect my src and let me know what you think because my sites first load decreased from 22 seconds to 4-7 seconds after doing the above I wish I could just include the latest version of JQuery!)
if I understand you correctly you are loading more than one jQuery library to the page (in different order)? That's a mistake - you shouldn't do that.
What you should do is make sure that the plugins you work with are compatible with the library you are working with. If they're not - wither find other plugins or fix the ones you have to support the jQuery language you are using.
You have a 2 megabyte hi-res background image, that is insane! I would scrap that and the swirl image, while it may look cool to you, it is distracting and may actually make people want to avoid your website. It makes it difficult to concentrate on the text in the middle of your screen. You don't want people to remember the swirling image, but rather your portfolio, right?
You also have 404's on the following:
http://www.nicholasabrams.com/ScrollSpy_files/result-light.css
http://www.nicholasabrams.com/example-images/testing_station.png
404's are bad for several reasons, they are a wasted resource as they slow the loading of your page, because it attempts to find something and does not find it, and, finally, they have a negative impact on your SEO, specifically Google PageRank docks you for any 404's.
Find a way to work with one version of jQuery, it will eventually bite you to have multiple versions of the library and it is a bandwidth killer to have your users load up a bunch of libraries, even if they are CDN'd.

Page stalling although appearing to be fully loaded

I have a page which appears to load fully, but I actually have to wait a further 6-10 seconds for things like buttons to become fully functional.
In IE you can still see the browser loading bar at full for this time after the page displays.
Does anyone know why this might be? I stripped out all the javascript and it still does it.
I get that in my pages sometimes when I don't compress my images. Large image files, or other large media, would be the first place I would check.
Something else I normally look for in speeding up the page is time it takes to download services (feed parsing etc), though since you took out all your javascript that shouldn't be a problem.
The problem with this was the way the page was rendering from the asp:repeater
Instead I created a datagrid and it seemed to eliminate the problem. No idea why as I'd expect it to be the other way around if anything.

hide html page source

Is there is any way to hide asp.net page view source?
If you mean, can you hide your ASP.NET code: it's not visible in View Source.
If you mean can you hide your HTML: you can discourage casual peeking by creating your HTML on the fly via Javascript or AJAX, but a developer will always be able to see what you are doing, using simple tools like Firebug and Fiddler.
Edited to add:
I wasn't thinking of obfuscation (though that also discourages casual peeking), I was thinking of using javascript to pull down HTML. Doing a View Source will only show a bunch of <SCRIPT> tags.
But it appears his question has been revised to go in a different direction anyway, to can I keep people from downloading my images, and the answer to that is a simple no. Making money from small numbers of images is not a viable business model. (If you have thousands of images, that's another story.)
Edited to add:
The conventional way of making a catalog of photographs is to [a] show low-resolution previews, [b] put a watermark on each image (here's an example), or both.
Are you talking about ASP.NET or the result? Since ASP.NET is server-sided, it simply returns HTML. Basically, your ASP.NET file is processed by the server and variables and functions are converted into HTML. Your users can view the HTML but not the ASP.NET as it resides on server.
No, there is no way to hide the html source of a page. It's just not possible. There are tools that will promise the ability to do this, but don't believe them. Consider that it might not even be a traditional web browser that downloads the html.
What you can do is obfuscate it a bit, but even that is trivial to reverse.
No, you can't hide HTML, and there's no point either. There's nothing of value in the HTML. It would take maybe a couple hours for a skilled developer to replicate the look and feel of a website without even glancing at the HTML. In fact, it would probably be easier for him to do it his way.
The ASP/code-behind, however, already isn't visible. It's processed on the server and outputs HTML. Only the HTML (and CSS etc.) makes it to the client.
Reading the comments, it appears you want to prevent users from downloading your images. You can't really do that either. You can make it a lot more difficult for users to download them by embedding the images in Flash, or a Java applet, or something like that, but a determined thief could still decompile it and nab your image. Easier yet, he could just take a screenshot and save it out.
The best you can do is restrict access to the image to only certain users by making the image source point to a script instead that runs some validation before outputting the image.
This is not true you can hide source code. One way would be to write a loop that puts a 100k /n in the source code at the top. So it will push it so far down with white space that you can see it :-)
Where there is a problem there is a way.
And for all those who dont like this. Amazon used to hide there code somehow until sometime back.

Categories