I want to make a javascript (or jQuery if that's a possibility) button for my HP which stops the loading of the images on the page (for example when a user has to pay per MB and is only interested in the text).
I searched and searched and found answers like "remove the src", or "use window.stop()", but the problem is that they don't work, cancel the whole loading process, or simply don't do what I had in mind (like removing the images completely).
Does anyone know how I could achieve that?
Thank you very much :)
PS.: found a how to that claims that it can stop the download of specific parts of the site, but it doesn't really explain how to specify the part. I don't get how to link things here so here's the url: http://www.ehow.com/how_6104889_kill-browser-downloads-javascript.html
Thanks again.
Short answer: don't bother. If a user has such limited bandwidth that loading images is a problem, they will have disabled images anyway, or they will use some mechanism to load images on demand. You don't want to burden users with a non-standard solution that only works on your homepage. Simply put, it is not your problem.
Long answer: you can use placeholders instead of actual images on the initial page load, and then use Javascript to set the src attributes one by one, having each successful load trigger the next image. You will lose parallel loading though, which means you are punishing high-bandwidth users (which is the overwhelming majority these days) with much longer loading times, and you'll be spending a lot of effort on a feature that is (see short version) mostly useless.
You could try to change src to point to an empty image.
You won't be able to cancel the image loading process programmatically from within the web page.
You could try breaking all image srcs using JavaScript but it's a dirty approach, and your results may vary - it could be that the browser continues to load the resource nevertheless.
The best way to go would probably be either loading images on demand (which is possible to do from within the page), or offer the option of serving pages from server side that don't contain the images in the first place.
However, as #tdammers correctly points out in his answer, it's probably best not to bother. People on a traffic quota will take their own precautions against loading too much content.
I wouldn't bother replicating a browser configuration option with an in-page button, but I would recommend showing a placeholder image then lazy-loading the images for mobile users.
Also as you like JQuery, there are jQuery Lazy-Loading plugins out there.
Related
When I first time load my website then images are jumping on each other
but when I refresh them it will look normal as I need it .
To see first time output of mixed images jumping on each other use
ctrl+shift+r
Jquery is creating problem when I load the website first time?
Any help would be appriciated.
This is not a jQuery issue. This is a network download issue. By hard refreshing (ctrl+shift+r), you are forcing the browser to re-download CSS assets, which increases the amount of time before it can properly style the page.
There is a front end design tactic that might suit you well in this scenario.
You have two sections that are "above-the-fold" when you first load the page. Instead of downloading an external stylesheet before rendering and painting these two sections, you can extract the "critical" CSS to a block in your HTML.
This ensures your CSS is there without wasting time with another HTTP request. For more information on what critical CSS is, I'd recommend this article: https://www.smashingmagazine.com/2015/08/understanding-critical-css/#what-is-critical-css
I have a blog website that loads the images slowly i want to know how to make them load faster and:
I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so?
-how to i preload images ? or is there any better way ?
Here are some pointers.
Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading. You can use JavaScript or CSS (background-image) to achieve such a placeholder.
Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.
Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!
Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.
My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.
This post might also help Load a low-res background image first, then a high-res one
My webpage webpage link uses 3 javascripts. A TabSlideOut script, a SmoothDivScroll script and the TN3 Image Gallery script.
When the page is loaded for the first time or reloaded the script for the TN3 Image Gallery is running for a while because many images have to be loaded and this takes time.
During this time the script for the SmoothDivScroll waits and only executes when the script for the TN3 Image Gallery is finished. Because of that the page looks very ugly during this time because the images of the SmoothDivScroll script are shown one after each other instead scrolling smoothly as they do when the SmoothDivScroll script is executed. You can see this when you reload the page.
What I would like to achieve is that the script for the SmoothDivScroll is executed first and only then the script for the TN3 Image Gallery should be executed. Or anything else that could stop the webpage from looking ugly when it is reloaded.
I am not a very experianced web implementer and I don't have javascript programming knowledge. I tried for two days to find a solution but I struggled. I hope that somebody can help to solve my problem. Thanks
I'm going to call this a FOUC problem; e.g., a "Flash of Unstyled Content." Very common. Been around since the late 1900's, and Safari is notorious for this.
Short Answer: Initially set visibility:hidden on your elements with an inline style. Then use JavaScript to set visibility:visible after they've loaded.
Generally, the solution is to hide content until the content is loaded, and then display it when it's ready. Often while content is loading, you will display a spinner of some kind.
Technically, there are many ways to do this. You can toggle the CSS display, visible, and/or the opacity setting. You can show an overlay div with a high z-index--which I call a "veil" with id="veil"--and then remove it when content is loaded, and use a spinner as the veil. You can also move things completely off the screen until they've loaded, and then move them into place. You can combine these methods.
Personally I've had the best success cross-browser and cross-device with the CSS visibility property. I like how it reserves space for the object in the layout. The other solutions sometimes flake on mobile and some older browsers. Here's a couple of snippets to get you started.
First, set visibility to none with an inline style.
- DISCLAIMER: I am NOT a fan of inline styles, and understand the concept of separation of concerns. In this case, I deem it necessary because this must have the highest cascade priority, be applied as quickly as possible, and I've had good success with it cross-environment. Purists will argue that this should go in a CSS file, but I believe that we should not follow any guideline dogmatically; sometimes we must have the courage to break convention in the presence of strong justification. Let the reader decide.
<div id="pan-content" class="clearfix" style="visibility:hidden">
Then, on page load (using jQuery):
$('#window').load( function() {
$('#pan-content').css({visibility:'visible'});
});
This might prove to be a little slow, because you're waiting until the whole window loads until you display the banner. You can also attach the event to specific resources, which will speed things up. See the following post:
Detect image load
Hope this helps!
You should never rely simply on order of scripts to determine your execution. Put your calls TN3 in a function that is called in the SmoothDivScroll complete method.
It might be easiest to use the non-minified version to do this.
I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site:
http://marckremers.com/2011 (Still not complete, in alpha phase)
As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).
I'm wondering if there is a way i can make it click into place first and then load the elements?
I tried putting the reposition script just after , not even that works.
Any ideas? Thanks
With all of the images you have, your page is 1.5mb, coupled with 70 http requests. No wonder your site behaves the way it does.
You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.
If you want to go further into optimization I would also:
Use one external javascript file. Yes
it increases size, but I favor that
over http requests.
Minify your html/javascript/css.
Don't host jQuery on your site, use a CDN such as Google APIS.
Check out a service similiar to Amazon S3.
I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.
You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your if ... else that handles how many columns to display and your Google Maps iframe.
To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the projects and tb_tweets classes, so it doesn't have to wait for all your JavaScript to load before handling resizing of your projects and tb_tweets.
use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.
A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?
Generally you only want to trigger your events after the page has rendered, i.e., using
$(document).ready(function()) {
//your javascript goes here
}
Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.
as obviously the css related to the page being injected is not loaded by Chromium. However, it is working well in IE8/O 10.x/FF3.6x.
Hence begs the question - my stupidity in html coding, Chromium bug or jquery bug? that is what I could think of.
this is the page in question, eliminated all non-essential js http://logistik-experte.gmxhome.de/test.html, navigate to resume and see the difference. It is basically driving me nuts as missing the point somewhere and hence any sound advice/help would be highly appreciated.
cheers
I agree with Buggabill: works for me in Chrome 5. (At least on the server; there may be issues with loading files from a local filesystem.)
However there are problems with your approach. By having page content loaded by script only, you have made your page inaccessible to non-JavaScript users, which includes all search engines. Also you can't use the back button and the pages are unbookmarkable, un-open-in-new-tab-able, and so on.
Basically you've reinvented all the problems of <frameset>, the reasons why no-one uses frames any more. You shouldn't really deploy this kind of solution until you are familiar with the ways accessibility and usability can be served. At the very least, you need to point the navigation links to the real pages containing their content. Then consider allowing hash-based navigation, so the dynamically-loaded pages have a unique URL which can be navigated between, and which will re-load the selected page at load time when the URL is first entered.
Also if you are loading content into the page you should take care to load only the content you want, for example using load('portfolio.html #somewrapperdiv'). Otherwise you are inserting the complete HTML, including <!DOCTYPE> and <head> and all that, which clearly makes no sense.
To be honest, as it currently is, I don't see the point of the dynamic loading. You have spent a bunch of time implementing an unusual navigation scheme with many disadvantages over simple separate navigable pages, but no obvious advantage.