I cannot get animated gif to display before flash movie loads. I am using this script but does not seem to work. I do not want to use a flash loader.
<script type="text/javascript">
var image = new Image();
image.src = 'http://www.hmaimages.com/MN/flash_loader/loading.gif';
</script>
Any help be much appreciated.
You don't need javascript for this.
Simply wrap and flash file in a div and give it a background image:
div {background:url(loading.gif) no-repeat center center;}
Related
I am doing an animation where based on the scroll I change multiple background images of a main div amoled-section. Hence, I am doing this by adding a class whenever the scroll hits a trigger e.g. #amoled-section-frame6.Every time when trigger hits#amoled-section-frame6 it adds a class to amoled-section.on-frame6
.amoled-section.on-frame-6 {
background-image: url("https://image.shutterstock.com/image-photo/portrait-cheerful-male-architect-wearing-260nw-1060056851.jpg");
z-index: 1;
}
It was working all good until I observed that if I have a multiple image change it will require a time to download the image and will create a glitch effect. The problem that I want to resolve is somehow download background-images of divs before using them and in this way, the background image transition will work fine.
I attached in Codepen a link to the full code, however is not working probably because Srollmagic is not that flexible with Codepen. Link below.
https://codepen.io/obsesie/pen/qBZKzGz
I have worked with ScrollMagic.js before and had an issue as same as you have. There are two solutions I prefer.
Embed images with the style of "display: none"
Use javascript to preload those images.
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
//--><!]]>
</script>
There would be other solutions but I hope this would help.
Also, this link would be useful for you.
https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/#:~:text=JavaScript%20Method%20%232&text=As%20you%20can%20see%2C%20each,as%20many%20images%20as%20necessary.
OnMouseover image I am getting from custom meta box and OnMouseout image is featured image.
Here is my code:
$image_full = wp_get_attachment_image_src(get_post_thumbnail_id($postid), 'full');
$him = $post_meta['_hover_image'];
<img onmouseover="this.src=\'' .$him[0]. '\'"
onmouseout="this.src=\''.$image_full[0].'\'" src="'.$image_full[0].'" />
Everything is working fine but taking time to show image.
This issue is likely caused by the delay in loading the resource. To help with this, you can cache the image at the URL by loading it in JavaScript with something like the following:
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
preloadImage($him[0]);
preloadImage($image_full[0]);
If the images are not dynamic, you can also preload them using CSS. More info about this can be found here: CSS3 image preloading
The role of the script is to change image.jpg with newimage.gif and vice versa when clicked.
Now i want to add a spinner while the newimage.gif loads.
Something like on 9gag.com/gif .
Can someone help me please?
This is the code:
html
<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>
javascript
function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;
if(img == 'gif') {
document.getElementById('pic').src=imag2;
// here the newimage.gif changes to image.jpg
} else {
// here the image.jpg changes to newimage.gif
// i think here should be the code that will display a spinner while the image.gif loads completely
document.getElementById('pic').src=img1;
}
}
The easiest way might be to set the CSS background-image property of the images to a loading spinner graphic.
HTML:
<img src="path/to/real/image.jpg" class="loading">
CSS:
img.loading {
background: transparent url(path/to/loading.gif) no-repeat scroll center center;
}
Once the actual image is downloaded, it covers up the "loading" animated GIF background image.
If you have GIFs or JPGs saved with Progressive display, you'll want to resave those images without that option so the real image is invisible until the full image is downloaded allowing your spinner graphic to show through in the meantime.
Have a look at this: http://www.appelsiini.net/projects/lazyload.
Images outside of viewport are not loaded until user scrolls to them, and you have the aboility to have a small image placeholder untill it's loaded...
I've actually used it here, on a testing site, some time ago: http://dev.thomaskile.me/?page=test-zone&module=Masonry.
I found a kind of way, the only problem is that after the image.gif gets loaded the spinner still appears.
if(img == 'gif') {
document.getElementById('pic').src=imag2;
// here the newimage.gif changes back to image.jpg
document.getElementById("spinner").style.display = "none";
} else {
document.getElementById('pic').src=img1;
var image = new Image();
image.src = document.getElementById('second').href;
var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none";
} else {
document.getElementById("spinner").style.display = "block";
}
}
}
This is here i use the script http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk
Have you checked out this site for a configurable spinner without additional graphics that can be attached to any dom element ? starting / stopping the spinner boils down to 2 js function calls.
the code comes under the mit license, the minified js standalone file takes 9kb, glue code for use as a jquery plugin is provided and there is a vml fallback for, err... steampunk browsers ;-).
i'm not affiliated in any way with code or author.
I have a large gif animation on a web page and want to start it not until it's completely finished loading. How would that be possible using JavaScript / jQuery?
Use a placeholder image, and replace it with the animated GIF once that GIF is fully loaded:
<img id="anim" src="placeholder.gif">
JS:
var myanim = new Image();
myanim.src = '/img/actions.png';
myanim.onload = function() {
document.getElementById('anim').src = myanim.src;
}
http://jsfiddle.net/mblase75/6XTg7/
You can hide GIFs with CSS (or JS replacing them with a placeholder) and when GIFs are loaded you can fire show()
$('img[src$=".gif"]').load(function(){$(this).show())
You could hide it until it is fully loaded.
<!--- this uses jquery !-->
<script type="text/javascript">
var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif";
var image = $('<img />').load(function(){
$(this).show();
}).attr('src', image_url).hide();
$('body').append(image);
</script>
The issue here is that once the image has been downloaded (i.e it is in the browsers cache), there really doesn't seem to be any way of starting it from a particular frame.
You have no control over gif animation through javascript, so you have to implement some sort of a hack. You have to make it hidden in the beginning. Instead of the actual picture you can put a div with the dimensions of the actual picture and with text like "wait".
When the image is downloaded in the browser you can substitute div with an image. And at that point of time animation will start
I have a problem with a mouseover script. Everything works as it should but I have a small issue that I don't know how to solve. More precisely, the mouseover script creates a grayscale image hover effect. When the page loads the colored images are showing for a short time (1 second or less) and then the javascript is applied and they are all grayed out which is exactly how things should work.
How can I make it so that the colored images will not appear before the javascript is applied? Basically, I want the grayscale images to appear when the page loads not after. Is it possible?
You can see the script here and the webpage in question here.
I would remove the images from the HTML and load them dynamically.
I would use <a class="placeholder" href=""></a> as placeholders for the <img src="" /> and would style the links to either be hidden or go well with the design.
$('a.placeholder').each(function() {
var src = $(this).attr('href');
var image = new Image(); // this is not yet visible in the DOM.
image.onload = grayscale; // change the grayscale function to accept
// event parameters
image.src = src; // this triggers the onload event which
// grayscales the image
var dom_image = $('<img />').attr('src', src);
$(this).replaceWith(dom_image);
});
Of course you have to be doing the above on document ready not on window load.