Using a div with
<div ng-style="{'background-image':'url('+image+')'}"></div>
I would like to show a spinner in the div while the background image has not yet been fully loaded. How is that possible? I want to use the background-image for displaying the image (and not the src) since I want to crop and center my images.
Set a 'loading' variable on your scope to true when loading and then false when loaded.
Use ng-class in the template to set the class with the background image when 'loading' e.g. ng-class="{'loading-class': loading} "
Use onloadeddata event Angular on video load event
Related
I'm doing 2 changes on a div with jQuery:
if (jQuery("#geodir-wrapper-content").length > 0){
document.getElementById("geodir-wrapper-content").id = 'geodir_content';
}
as well as:
jQuery("#geodir_content").css({
height: "calc(100vh - "+contentHeight+"px)",
'overflow-y': "scroll",
'-webkit-overflow-scrolling': "touch"
});
The result is exactly what I want: the right shape and the right CSS classes are applied to the div.
The content within this div has images loading with lazy load javascript. The first images load fine, but when scrolling inside this div the new images don't load. They only load when the window gets resized or if there is a possibility so scroll on the main page (which I don't have on my final design).
I've set up a jsfiddle with the complete setup. Note that I can't modify the lazy load javascript as it's part of a plugin, so I'd like to find a workaround in my own code.
$(function () {
$(".btn").on("mouseover",function(){
$(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
});
$(".btn").on("mouseleave",function(){
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
});
});
The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:
<img class="btn" src="images/index_03.gif" />
The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
This code will reload the image, every time (or from cache).
So, during the page loading as other data is also loading at the same time, onhover image loading will be slow or broken.
I suggest you should load both images at the same time and at the same position and show/hide them on hover to get faster results.
Using CSS sprites instead of javascript calls will eliminate mouseover flickering, and reduce the total number of http requests required for your site (making it load faster).
You can achieve the same 'mouseover' functionality by using the css ':hover' pseudo element to alter the 'clip' property of the image (supported in IE6 and above).
Check out these CSS Tricks articles:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.
CSS Sprites with Inline Images
Inside a page I am having a TR on which when user click it change it's color to blue and arrow color to white. This is achieved by changing elements' class dynamically.
But due to this what happen is, when user click on TR user saw image loading delay. How to preload that CSS image.
this.className = this.className + " active";
CSS
.table td.arrow div {background-image:url("../stuff/arrow.png");}
tr.active td.arrow div { background-image:
url("../stuff/arrow_active.png"); }
Update
One more thing want to update that static content is getting loaded from other server.
The browser only loads images from the CSS that are shown. So you could place your arrow_active image in a element, that is visible but has no opacity.
But i would suggest you use sprites: Less HTTP requests + no preloading problems: css-tricks.com/css-sprites , alistapart.com/articles/sprites
You could solve your problem like this with pure CSS.
http://jsfiddle.net/Q6dTf/
Alternatively you could use a :before pseudo element if you dont want to add a new HTML element.
As #meo said you are probably better off using sprites, but in case you want to preload images you can just create a dummy Image instance that loads the image into the browser's cache.
Like:
var preload = new Image();
preload.src = '../stuff/arrow_active.png'; //triggers the download
In case you want to wait for the preloading to wait for the page to build you can listen for the load event that the preload will fire when it has finished loading the file (be careful as this is complicated terrain).
I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.
Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.
All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).
Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide() my entire body while the background image loads.
*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded? *
* EDIT 2 *
Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?
<script>
$(function() {
// create a dummy image
var img = new Image();
// give it a single load handler
$(img).one('load',function() {
$('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
});
// declare background image source
img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";
// make sure if fires in case it was cached
if( img.complete )
$(img).load();
});
</script>
This seems an old thread but I found a solution for this.
Hope it can help:
$(window).load(function(){
$('<img/>').attr('src', 'images/imgsrc.png').load(function() {
$('#loading').fadeOut(500);
$('#wrapper').fadeIn(200);
});
});
Use $(document).load() to achieve what you want.
"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"
It is, just before the page has loaded
Add display: none; to your body tag
<body style="display: none">
Then with jQuery modify your code so it looks like this:
$(img).load(function(){
$("body").show();
});
Now page content will only show after img loading is complete.
To check when the image is loaded, declare another, "regular" image (i.e. the <img> tag) with the same src and attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.
Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.
I want to change an image when a checkbox is clicked. Until the new image is fully loaded a loader image should appear on top of the current image. While loading the opacity of the current image should also change to 0.5.
The function should therefore consist of the following steps:
On checkbox click:
Change img src
While loading:
Set opacity of current image to 0.5
Display loader.gif
When new image is loaded:
Change opacity back to 1.0
Hide loader.gif
Display new image
How can this be done with jQuery?
Thanks in advance for all proposals!
The steps should actually be
on checkbox click, start to preload the new image
Start by creating an Image object, and then setting its load property to a function that will be called once the image has been completely loaded. Then (after setting the load property) set the src attribute of the Image object we created to the Url of your image.
while waiting, set the opacity, show the loader
Opacity you can control with the css property opacity. You should have the loader already in the page but hidden, and just show it while the preloading is in progress..
when preload is complete hide preloader, show image reset opacity
The function we defined for the load attribute gets called and inside the handler we reset the opacity, hide the preloader and set the src of our element in the page to the src of the Image object we created..
here is a full example: http://www.jsfiddle.net/kqC9U/
Well, lets take a quick moment and dissect the problem:
If your changing the image source (which can be done almost instantly) why do you need a loader gif? In fact, displaying the loader gif takes as long as displaying the new image. If you'd like the loader gif for dramatic appeal you can display the loader.gif, wait 5 seconds, then change to the new image.
Changing the image can easily be accomplished by changing the src attribute on a current image. For instance,
$.('#myCheckboxID').change(function()
{
$.('#myPictureID').attr('src', "path/to/new/image/");
});
Let me know if you decide you need that loader gif for dramatic effect and I'll help you wire it up
edit:
Because the loading effect is desired, try something like this. I'll pencil down some psuedocode, let me know if its not specific enough.
Change the source on your first picture
Hide the first picture for x seconds (get a feel for how long it takes to load)
Unhide a loading gif of the same size with opacity already set
hide the loading gif and unhide the first picture