I'm using the Backstretch Plugin to load some full screen images. Everything works fine, but I'd like it to show the image loading (as it would by default) rather than wait with a blank screen until it completely loads. Is this possible? I'm not a JS expert by the way.
Thanks.
The Backstretch plugin is written to apply a set of catch-all DOM properties to stretch the image which are all fired on image load:
img = $("<img />")....bind("load", function(e) {
...
You would have to hack the plug-in to change this behaviour.
In any case, images and pages are displayed differently by different browsers during load, so I'm not sure exactly which behaviour you're after. One alternative is to use a highly compressed image in the background and replace it after the rest of the page has loaded. Or just optimized the image so the load time is acceptable.
Related
Does Bootstrap "Carousel" load all images at one time? If so, does it reduce site loading speed and increase loading time?
I do not know how Bootstrap Carousel javascript file works. When next icon is clicked, if next image is loaded via ajax, there is no problem. But if all images are loaded at one time, I think it reduces page speed.
Any idea?
Bootstrap carousel just rotates it's items. If images are defined by src attribute, images will be loaded with the rest of the page.
You can use some lazy loading solutions to load images sequentially - Google search
Bootstrap does not do any magic lazy loading behind the scenes as Tigran points out. However, many browsers do not request images that are hidden through "display:none". So when inspecting network traffic with, for example the Chrome browser, you will see that the images are in practice "lazily" loaded.
An outdated and almost unreadable list of browsers with this behaviour can be found here: http://www.w3.org/2009/03/image-display-none/results
I have an image of a vine of leaves I'd like to load slowly from left to right after a delay (after the site fully loads) to underline and emphasize a slogan of website I'm working on. I don't want to animate the image, just make it seem as though it is growing by loading it slowly.
Is there a CSS solution or would it be easier to use Jquery?
Thanks so much in advance for any help!
I don't believe there is a CSS solution to your query. In photoshop you can save a jpeg or png as progressive (interlaced) so that it downloads progressively but on anything but the slowest link a regular size file will appear to load quickly.
I would have thought your easiest option was an animated gif - the opacity and apparent size could be tightly controlled and you can set it only to run once per visit. You could bind the image to the jQuery(document).ready() callback for the "after the site fully loads" part of your request.
I am trying to create a page where appropriate images to load are determined by javascript, based on browser size. For example:
<img src="image1.jpg" />
javascript would change it to:
<img src="image1_800px.jpg" />
and load the 800px wide image version.
Doing this is not a problem. Problem arises when i try to do the same for browsers without javascript. The basic idea would be to hide images initially and display them with a style in NOSCRIPT tag. So browsers that support javascript will change image urls and make those images visible and browsers that don't support javascript will simply unhide those images by css. The problem is that images with display:none are loaded by browsers. And adding image url into anything but the src attribute is not an option as such image would rely on javascript to set its src.
So are there any ideas if it's possible to make this work?
For instance: i could rewrite image src attributes on domready and hope that browsers don't manage to start loading images from old src, but would that be the case? If so - would it always be the case or would some browsers work differently?
I think what you're looking for is http://adaptive-images.com/ - it uses Javascript to determine image size, but also has a back-up option if the user does not have Javascript enabled that still provides the resized image (with caveats, read the docs).
I'm running a function on every keyboard keyup to monitor a text field.
Depending on the input, I am using jquery to .removeClass("classwithBGImage").addClass("classwithnewBGimage")
This is working nicely, expect on the first load there is a flicker in the background image.
I have tried preloading the images with Javascript and CSS, even tried using a sprite - but there is always a flicker on the first load when .removeClass("classwithBGImage").addClass("classwithnewBGimage") is triggered.
Update:
Seems to be a documented chrome bug:
http://code.google.com/p/chromium/issues/detail?id=102706
As witnessed in this jsfiddle: http://jsfiddle.net/QpvUQ/2/
Any ideas? Much appreciated.
Apply the background-image to a div positioned absolutely and left:-99999px.
#preload{
background-image : url(large-image.png);
position:absolute;
left:-99999px;
}
Later, use it for the actual div
.classwithnewBGimage{
background-image : url(large-image.png);
}
This is one of the hacks that I am aware of for pre-loading images so that they don't take time when you actually use them.
Also, .removeClass() without arguments does nothing. To avoid flickers use smooth transitioning.
.stylesWithoutImage{
///
}
.classwithnewBGimage{
//img
}
Using Move.js you can Animate CSS Changes.
move('.box')
.set('background-image', 'url(img)')
.end();
PS : Not tried but it say's you can animate CSS with it.
I did an implementation with only CSS to do the same than your jsfiddle.
How it works?
.class {
background: url(...);
}
.class:hover {
background: url(...);
}
I left the JS code if you need to do it with Javascript, but with only CSS should be enought.
http://jsfiddle.net/QpvUQ/7/
I've figured out the problem in case anyone else runs into the same issue.
With preloading, the images are preloaded but many browsers still receive a 304 response for the image causing a flicker on first load. You can force the browser to cache images in the case with rails applications.
Enable image caching in development mode in Rails 3.1
Are there any differences in performance or load/caching behavior when displaying images in img tags vs divs with image backgrounds?
My example:
I have a site with many overlapping images, some of which I will need to load dynamically with javascript. One issue is that I need to anchor the images to the right of the element, so that I can do a nice wipe-to-right effect. Because of this I was using a div with background image positioned right. Couldn't figure out how to do this with img but since divs are working for me I didn't know if this would matter...
AFAIK, browsers cache images the same whether they're in a DIV or an IMG. In any case, I think this one of those cases where specific performance is defined as an implementation detail internal to each rendering engine (and possibly the browsers built around them). As such, it's both out of our control as designers/developers and subject to change from browser to browser and version to version. In other words, I wouldn't spend too much time worrying about it.
The main performance difference is using background images allows you to use CSS sprites. Having one image contain a large number of images from your page means the user only has to make one request instead of one for each image.
Another difference is with responsive layouts. If you have an element that is only shown at certain screen widths (ie, not on mobile phones), it will still load the image if it is specified in the html (using display:none for instance), but most all browsers now will NOT load the image if is a background-image specified in unused media query-CSS rules. A lot of early responsive layouts got criticized because they still used the same bandwidth as the full size sites.
It is also useful with such designs because you can easily specify different images for different screen sizes. "Retina" displays on tablets and even laptops now won't look their best without 2x res graphics. So... even if you don't do such things now, it is probably a good practice to get into, because you might find yourself needing it soon!
I think by using background-image attribute in the div, the page layout gets loaded first and image present in the divs loaded later after the dom is loaded. so by using background-image the html layout is loaded faster on the web browser.
The only difference I can conceive of it this:
You can't scale images as backgrounds, although you can for img tags. This would open a scenario where background images loaded faster becuase it forces you to have the correct native size as opposed to downloading the entire image and scaling it. However, the converse could be true: given that you didn't care about image quality so much, you could deliver smaller imgs to your page and scale them up.
I'd stick with whatever rendered cleaner (and more consistently -- IE/FF/Chrome/Safari/etc).
Technical differences yes, most notably you can set the width/height of an IMG tag and it will stretch the image, which can be useful in some situations.
The main thing you've got to keep in mind though is the context of the image within the HTML document. If the image is content, say an image in a gallery, I'd use a IMG tag. If it is just part of the interface I might use a div instead.