Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to do a pre-loading for a website:
I want to create a loading page/image/etc. to show before the actual
page is loaded.
Nice would be something like a spinner/loading-bar
The pre-loader shell vanish when the actual page is fully loaded
How can i achieve this?
You should check if all elements of webpage are loaded.
You can use JQuery, for example:
$(document).ready( function() {
// something here
})
From jQuery documentation:
The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready()
or use jQuery's .load() method to attach load event handlers to the
window or to more specific items, like images.
I don't know your programming skills, but if you are aware of javascript and jQuery you could easily try this tutorial:
http://avexdesigns.com/create-a-jquery-preloader/
The Plugin you will find here: http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/
and all about jquery is found here: http://jquery.com
You can have a progressbar in ur webpage before loading ur actual content.
Refer the link below.
http://tutorialzine.com/2013/09/quick-tip-progress-bar/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been told loading jQuery at the end of a page increases performance for mobile.
I don't believe this, however open for an explanation.
Regardless, is there any way to get jQuery calls at the beginning of the page to load only after jQuery has been loaded? I know of timeout work around but they seem inconsistent.
The reason why you get "better" performance is that the page will be parsed before it reaches JavaScript at the end of the document, and once a section is parsed, rendering can begin. By loading JavaScript at the end of the document, you let the basic hard-coded layout in your HTML and CSS appear before you add functionality with JavaScript. This gives the user the illusion of "faster loading time" for your page.
The caveat here is any JavaScript you want to use that will call on external libraries must occur after the libraries' script tags. This is not an issue if you have packed all of your code together into its own file, but it will cause trouble for inline scripts you have strewn about the page.
This is part of why such behavior is discouraged in production applications, the rest having to do with the ability to maximize compression of the script content with gzip and so on.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Say I have an HTML page where a few elements have some JQuery functions.
One of those functions calls another HTML file if an image is clicked. The called HTML file echoes some HTML to the screen. Some of this HTML has JQuery functions.
If I want those JQuery functions to work, do I have to include them on the called page, or do I only need them on the original HTML page?
If you still don't understand, hopefully this will help:
Page 1 has a function that calls Page 2.
Page 2 echoes HTML back and some elements within the HTML have JQuery functions which are already programmed on Page 1.
Do I have to include the actual JQuery on Page 2 as well or will it work if I just have the JQuery on Page 1?
Please help.
You have to use delegated event handlers for your elements when loading dynamically, i.e.
$(document).on("click", ".your-element-class", function(){ // or id(#)
// code
});
This way, you can keep all of your javascript code (event handlers) in the main page and all elements loaded dynamically into the DOM will work.
Check jQuery on.
If I understand you correctly. I believe you load some HTML using AJAX and you want to trigger some JQuery functions on AJAX load content. If my assumption is correct you could use something like
$(".my-ajax-loaded-content").on("click", function(){
//do something
});
Important thing is using on (jQuery 1.7+) which bind to AJAX loaded content
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a page (Facebook page) that has its content changing dynamically. I am writing a GM script but it only loads when the page refreshes, and this is not the case. I have tried to do something like:
mydiv.addEventListener('load', myfunc() ,false );
as I saw in a different thread, but it didn't work. What am I doing wrong?
Thanks.
Use setInterval() or the waitForKeyElements utility.
Can't give any more detail unless you provide specifics like: what, exactly, you are trying to do; before-and-after HTML; or even a link to the page and/or screenshots.
Change myfunc() to myfunc.
Using myfunc(), you are calling the function.
While myfunc is just passing the reference to your function.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to simulate such clicks without controlling web browsers to do the job. I don't know much about javascript and actually don't know where to start.
Any ideas?
Althoug I have no use it, I think that maybe twill is what you need:
twill: a simple scripting language for Web browsing
Have a look at this too:
Testing Web Applications with Python and Twill
You can use iMacros in combination with Python...
This isn't the most direct solution as it requires you to write an iMacros script to do that actual clicking, and then load the page and call the script from Python.
Refereces:
iMacros CLICK command
iMacros wiki
I recommend you take a look at Selenium.
If you had control over the link (like adding an ID attribute) you could use javascript to simulate the click
var link = document.getElementById['yourLinksIdAttrbuteValue'];
link.click();
or you could use jQuery selectors as an easy way to better target the link without altering it...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){ $("a[href^='javascript']:contains('text')").click() });
</script>
With that code it'll load the JQuery library from google's server, wait for the dom to load, then execute the click.
for more info on jQuery selectors check out http://api.jquery.com/category/selectors/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I was browsing around the web and I saw something I've never seen before.
on this site:
http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/
When you navigate down the page, the images only load when they are in the visible portion of the browser.
I have never seen this before and was wondering if anyone else has and how exactly one would do it.
I'm guessing this is some sort of Wordpress plugin (that's what he's using) but I'm not sure.
Is it javascript? Are they actually loading on page load but just become visible later for a "snazzy" effect or is this actually useful for quicker page load times?
"wp-content/plugins/jquery-image-lazy-loading"
Lazy loader is a jQuery plugin written
in JavaScript. It delays loading of
images in (long) web pages. Images
outside of viewport (visible part of
web page) wont be loaded before user
scrolls to them. This is opposite of
image preloading.
Using lazy load on long web pages
containing many large images makes the
page load faster. Browser will be in
ready state after loading visible
images. In some cases it can also help
to reduce server load.
http://www.appelsiini.net/projects/lazyload
So it seems it goes through every image specified or inside of the context of an element and replaces the src with a placeholder gif before the images fully load, saves the original URI and when the image is "visible" it replaces the placeholder with the real image.
LazyLoad is no longer available according to the website. Apparently the code no longer works on new browsers and the author doesn't have time to update it.
The "appear" plug in is working well for me.
http://plugins.jquery.com/appear/
It allows you to specify a callback function for an element. The callback function is called when the element appears into view. From the site:
$('#foo').appear(function() {
$(this).text('Hello world');
});
If you look at the source of the page you referenced, it contains this bit of code:
jQuery(document).ready(function($){
jQuery(".SC img").lazyload({
effect:"fadeIn",
placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
});
});
I suspect that's how they're accomplishing the effect. It uses the jQuery LazyLoad plugin, which can be found here:
http://www.appelsiini.net/projects/lazyload
As Sanjay pointed out, the jQuery LazyLoad plugin from Applesiini no longer works. Here is another jQuery plugin that I found. Just another option in addition to jQuery Appear.
http://plugins.jquery.com/project/LazyLoadOnScroll
http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/