I'm having some trouble getting my wrapper's background image to preload before my nivo-slider slideshow loads. This is something my client is very picky about even though it's only a fraction of a second -_-
I've tried every jQuery and css method I've found on here and either it makes no difference or breaks the nivo-slider.
Here is a link to a test page
http://www.wheatbeakinc.com/test/
As you can see it loads fast enough for most people but like I said my client is picky about these kinds of things. Also the actual background image is larger in filesize than the test so it takes a little longer.
Can anyone offer any insight?
Thank You.
If you insert the background image as an actual image before the slider code and set it to hidden, it should at least start loading before nivo slider. (Background images load last).
E.g.
<img src="your-background-image.jpg" alt="" style="display:none" />
If that still doesn't work, you could wrap the nivo slider in window load instead of doc ready, so it only begins after all images on the page have loaded:
$(window).load(function(){
//slider code here
});
Related
I have a question regarding the image loading style as shown on http://www.e-flux.com. This website first loads an image of a certain pattern (randomly) before proceeding to display the actual image. My guess is that this is to have visually pleasing content before even having loaded the total website.
I have looked at the source code and I saw that it had a class of "lazy is-loading". I think it has to do something with that.
I'd like to replicate this effect and did some research, about progressive images and such. Also, this website: 'css-tricks.com the-blur-up-technique-for-loading-background-images/' explains about loading a small image first and blur it to keep loading times low until the actual image has been downloaded.
But I can't seem to find how they did this trick at http://www.e-flux.com.
All info is appreciated!
Old question but doesn't have a selected answer.
I'm working on the same thing, and something simple I'm trying is as follows:
<img style="background-image: url('MYIMAGE.svg');" src="MYIMAGE.jpg" width="500">
the .svg is a very small file and thus loads almost instantly. Then, the .jpg pops in when it's done. I literally have no other code - trying to keep it simple.
Sometimes the CSS background-image is not desired. You could also use a simple inline javascript for this purpose, a disadvantage is that the placeholder image has to load first and correctly. However, this is usually not an issue, as the placeholder image will be faster to load in the first place, and may already be in cache.
For example:
<img src="placeholder.jpg" data-src="my-image.jpg" onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');">
This works because the browser will typically leave the currently displayed image in view until the new image has loaded.
It might not be a perfect solution, but it is simple, fairly readable, and easy to implement.
Looking at their source, its done using a background-image sprite, positioned on a div element - alongside the image that's eventually loaded..:
<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div>
and
.item-image-wrapper-bg6 {
background-image: url(../elements/bg-6.gif?2);
background-size: 85px;
}
I've been looking around for an efficient js responsive image slideshow gallery but I cannot make up my mind.
Neat ones such as ResponsiveSlides come at the price of loading all the images beforehand. When the page loads, all the images are loaded as well. Since I have 50-60 images per slideshow, every page requires several MB to be downloaded when the page is loaded, resulting in delays and bandwidth consumption.
Do you have a more efficient strategy/library in mind?
I'm guessing you want an image slide with lazy loading so that images don't load until they enter the viewport. I know Owl carousel has it as an option and it's also responsive. I'm sure there are others.
You can try this gallery.....
http://johnpolacek.github.io/ResponsiveThumbnailGallery/
I came across the problem of image loading in website.
It's need to load 3 high resolution images in home page, and when open, it's showing website other contents first and load this images which is fine for now.
But it's slightly awkward, and would like to have similar image loading process like Google image search.
When I click image in Google, it shows blurred or pixelate image which seems like low resolution and lower size and loading original image a bit later.
They might use special thing as they are Google, but if someone have done this kinds of things before, I need your help.
Thanks in advance
Sounds like you want what are called "progressive JPEGs", where multiple images of varying quality are saved in one file, and the browser loads the low resolution images quickly to get something in the page, and replaces it with higher resolution images once they've been loaded.
Here's a tutorial on saving JPEGs for the web as progressive in Photoshop
You can use jQuery. The following is a general idea, not an exact code.
For each image use something like:
<div>
<img id="myimg" src="" style="display:none">
<img src="low-res-version link">
</div>
You should also keep a low res image.
Use jQuery to set your images src after the page loades, and use the next() function to remove the low res image.
$(document).on('ready', function() {
$('#myimg').attr('src', 'link to the image').on('load', function() {
$(this).css('display', 'block').next().remove();
}
You can also check this question: Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?
Well, I choose resolutions from the server-side;
loading the low-res immediately in a z-index=0 object,
loading the one or more hi-res objects into negative z-index objects
and then at onload(), choose which object should be on top
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
I am building a splash page for a website with jquery animations.
My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.
Ok, heres what I did:
the container div has the following css: background:url(images/colorcity.png)
if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect.
to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')
What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.
I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.
Thank you ahead of time for any help.
The page: http://roughgiraffed.com/barrandbarrbags/
Try including this at or near the top of your page:
<img src="images/greycity.png" style="display: none;" />
That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.
Very cool page, by the way (and it seems to work great in firefox).