I want to show image and its text initially as we open the page for my Image Slider.
This is my demo: http://codebins.com/bin/4ldqp9c/15
here i am showing as all the DOM elements is loaded, but the need is to show the first image and its text initially for my slider as we open the page.
So I am not understanding how to load my initial image for my slider, so that its functionality starts after all DOM elements load.
I believe the term is "bootstrapping". You want the first image to load in as the DOM is loading, and before your script sets up the image slider.
One way to achieve this is to actually put the image in as part of the DOM. So, instead of an empty src in your image tag, put an actual url. Same for title and description.
I assume you're going to be doing an ajax request for the XML you're building in your example. If that's the case, then you probably have no way of knowing what the first image is, which means you'll still need a script to load data.
The performance gains from having two scripts will probably be negligible, but if you take that approach, make sure you load the smaller script in the head section of your html, and the longer one at the end of your body.
Related
i'm looking for a script or a way to preload images before the page become full load. What i found are script where i have to write the name and the root of the images, i need something that load like:
Load all img of the page, after show the page, during the loading of the images to show a preload image ( like loading or something like that ).
It's possible?
I have alrady tried the script on the web, but i found just script where i have to put the name of the images in a array... i don't need it!
I want that javascript load before ALL tag ( without i set the name of the images ) of the page and than show the page!
jquery has a plugin called imageready.
https://github.com/weblinc/jquery-imageready
Ive used it many times, it should work as you expect
Images will start being downloaded by your browser as soon as the DOM renders that part of your HTML. What you need to do is find a suitable animated gif very small size (few kilobytes) of a loading animation. Then have some javascript hide the image you want to show that is still getting downloaded by your browser. By using something like: Javascript callback for knowing when an image is loaded you will be able to check when an image has loaded, and the callback you can hide its associated gif and show the real image.
I've got an image that is loaded when the site is called.
<img id="some_Image" src="some_source">
Now I want to reuse that image and NOT request it again from "some_source". (Because it has to be computed and I do not want to recalculate it). I want that image later to be displayed in some JQuery dialog. I know the existance of append and prepend functions, but reading the documentation it seems like I have to insert a whole image tag as an argument, which results in requesting the image again. (if the browser doesn't cache the image)
have a look at the jQuery clone
it is supposed to work with images as well, if the image has been loaded by the browser its supposed to reuse it.
EDIT:
$( "#some_image" ).clone().appendTo( "#some_div" );
By default, all browsers cache as much as they can (js, css, images). This way, the moment your image is loaded you can create a new <img> tag with the same source path and the browser will use its local cached file.
My web page include a lot of img tags, but when it is initially displayed, most of the imgs are hidden. I want to load the imgs only when user shows the intention to view them, otherwise the page could generate too much network traffic.
I know I could insert the img tags into the DOM on the fly with javascript. But that way I lose the benefit of search engine indexing these images, I want the search engine bots to see these imgs.
Is there a way to keep the DOM structure unchanged, while loading the imgs only when needed?
You could try lazy loading:
Lazy Load delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
demo: http://www.appelsiini.net/projects/lazyload/enabled_timeout.html
http://www.appelsiini.net/projects/lazyload
https://github.com/tuupola/jquery_lazyload
http://luis-almeida.github.io/unveil/
What you could do, is put all the images in a <noscript> tag, so browsers without JavaScript, and thus search engines, can see them.
You can then add the images in using JavaScript manually, for those who do have it.
I was wondering if it is possible to remove the contents of a specific div class using javascript?
I would like to be able to access this div's content occasionally, so I don't want to remove it entirely but I'm worried that it will still take up page loading time, even if it has
'display: none' applied to it in the CSS. Is this correct?
Is there any JavaScript that will remove the page contents of a specific "div class" so that it does not slow down page loading time?
JavaScript works in the client, specifically, manipulating the DOM generated from the document loaded, that means, that if JS can see the object, it already took some time to be loaded.
If you don't want it to be loaded, the best way is to do is not to send it to the client, for instance, using server languages like perl, php, asp. etc.
Other way, is to have a frame in the page, with an empty src, and request that div after the document is loaded, that way, the effect is that the client doesn't have the load of that content in the firs place but will be available for your process later.
Bye
Removing elements with JavaScript won't affect your page's loading time. This is because the page is downloaded, and then the code removes the element after the page was loaded. It might even make it slower (slightly), since the browser has to execute such code to remove the element.
If you want to make the page loading time shorter, remove the element from your file, and then upload it again to your server.
You could then create this <div> dynamically by requesting it through AJAX (as Dr.Molle suggested), either using a library or plain JS.
I have a website that displays a list of around 20 auto-played slideshows(each containing 4-5 images) in a page. Now the problem is that this is taking up a long time to load the website(& ofcourse it would, since so many images) but I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
So... Is there a way to set a preferential order of loading of the requested resources ?
Is there a way to set a preferential order of loading of the requested resources
Yes - put them in that order in your HTML file!
I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
That's a different problem.
Your page components cannot be properly rendered until the dimensions of most elements are known. So, if you have other images in your page layout, those need to get loaded first, or have their width and height attributes specified in the markup.
Since your slideshow images would be mixed in with the rest of your layout if you used pure HTML to load them it sounds like you have little choice but to instead load all of your slide show images from Javascript, per other comments and answers.
Better way then using the dom to create elements have your divs or even img tags src be blank then load them with the images you want in an onload function using innerHTML:
function images(){
var place_to_put_image = document.getElementById("image_div");
place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>";
}
<body onload="images()>
<div id="image_div></div>
</body>
you could put your images in an array and assign the innerHTML of the div or whatever to the array as well if you want them all in the same place or you could put the onload in div or where ever you want the images to load.
There a few ways you can go about doing it but they all involve not actually putting the images in the HTML - at least not correctly. One way that I like to do it is to add the image src URLs to another property like the alt (not great for accessibility) or rel. Also, give all the images a class that will be used to hook into it with JS.
<img alt="images/foo.jpg" class="loadlater" />
Then in your JS, get all elements with class="loadlater" and set the source to the alt value.
img.src = img.alt;
You didnt mention jQuery. If you were using jQuery, the command to swap the attributes would look like this:
$('.loadlater').each(function() { this.src=this.alt; });
Then, wherever and whenever you call this, the images will be loaded. You will want to call it after your css and js finishes loading - probably the document.load function. Again, if you were using jQuery, it would look like this:
$(function()
{
$('.loadlater').each(function() { this.src=this.alt; });
});