First time I view the page with an animated .gif it plays fine on page load (lasts about 2 secs).
On refresh (F5), the .gif no longer plays and only the last frame of gif animation is shown.
Is there anything I can do do to make sure it plays everytime?
For the PHP the much better option then using date("Ymdgis"); is using time(), like this:
<img src="picturePath.gif?<?php echo time();?>" />
Strange behavior that's affects every browser..
I usually refresh it manually with this script (it uses jQuery)
<img id="gif_animata" src="picturePath.gif">
<script type="text/javascript">
var gifSource = $('#gif_animata').attr('src'); //get the source in the var
$('#gif_animata').attr('src', ""); //erase the source
$('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-)
</script>
This will refresh the src of the image adding the current date, so the browser will re-load it, thinking that's a new image.
Otherwise in PHP way (I prefer this one):
<img src="picturePath.gif?<?php echo date("Ymdgis");?>" />
//for the browser it will seems that's a new picture!
<img src="picturePath.gif?2012092011207">
The workaround that works for me for this issue is to reload the GIF manually using Javascript
GIF implemented on CSS (background-images)
var element = document.getElementById(name);
element.style.backgroundImage = "none";
element.style.backgroundImage = "url(imagepath.gif?"+new Date().getTime()+")";
GIF implemented on HTML (img tag)
var element = document.getElementById(name);
element.src = "";
element.src = "imagepath.gif?"+new Date().getTime();
Thanks to #sekmo
This works, only requires one line below it and I suggest not filling the <img> src attribute at first so the page doesn't try to load any unnecessary resources.
<img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a="+Math.random()</script>
It could be that your browser is just showing the cached version. Try holding shift and refreshing, and see if it works.
Related
I'm rendering image and I'm passing svg file as source attribute to image. It works perfect on all browsers, except Edge. I cant find an reason why it renders this weird black box with cross:
Html code of is like: <img width="3029" height="3920" id="id_of_image" src="data:image/svg+xml;charset=utf-8,<svg xmlns=....................CONTENT OF SVG............></svg>"/>
How can I show this kind of image also on edge? I'm filling src attribute from JS where I have element as string. I need to put it into image attribute, but question is how is that possible?
Problem solved. Issue was that in Edge it had problem with rendering svg when you are using tags directly in attributes. So solution was to replace and convert string in JS. I created function to generate SVG attribute for image from ajax request, when you have your SVG string:
function fixSVGDiagram(svgString) {
svgString = svgString.replace("<![CDATA[", "").replace("]]>", ""); //If styles occured, Edge crashes on that
svgString = svgString.replace(/#/g,"temporaryhash") //Because of hasthag issues (in styles)
svgString = encodeURI(svgString) //Magic happens
svgString = svgString.replace(/temporaryhash/g, "%23") //Get back hashtag
return "data:image/svg+xml;charset=utf-8," + svgString
}
If you are loading SVG as attribute in ajax request then you can store it as string:
svgData = (new XMLSerializer).serializeToString(responseData);
and then
var img = new Image
img.src = fixSVGDiagram(svgData)
and you can put image where you want.
svg code doesn't work like this for svg image.
Without the use of image tag you can directly use the svg tag in the html code.
OR.
You can create an svg file with *.svg extension and set the filename as the src in the image attribute.
We'd like to show a "Loading..." image when the page is still being transferred. Pages can get quite large in our application. I tried with a separate page that displays the image and then loads the intended page, but the animated GIF just stops.
Can something be done on the page itself?
Or is there a better way?
Thanks for your comments, as always!
UPDATE
Here's the general idea of my small switching page:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:div
style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000"
id="AjaxLoader">
<xp:image url="/loading.gif" id="image1">
</xp:image>
</xp:div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Loading a "loading" page prior than the one you want to load is not an option.
You can create to DIVs in your HTML: one for the loading icon (e.g. with id="loadingIcon"), second one for the content (id="contentWrapper"). The second one is hidden (CSS style="display:none").
Define a Javascript function like this:
function pageLoaded(){
document.getElementById("loadingIcon").style.display = "none";
document.getElementById("contentWrapper").style.display = "";
}
The script is called in the BODY's onLoad event like this:
<body onload="pageLoaded()">
...
</body>
It is not a question of the web-server environment, but how you organize your code :-)
Take your approach and modify it slightly. Instead of location.href = href - which just triggers a reload, use an ajax call and replace your loading div. Something like this:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
$.ajax({
url: "test.html",
context: $("#{id:AjaxLoader}");
}).done(function(result) {
$( this ).replace(result);
});
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
(contains typos, adjust as needed)
To answer my own question: No, it's not possible, but there is a nice way around this, in my case anyway.
The trick is to open a new browser window, write something in it and then allow the new page to load.
var w= window.open();
w.document.write("<div style='position: fixed; top: 48%; left:40%'>Loading...</div>");
w.location.href= url;
If necessary the text can be replaced by an image and the new url can be set after a timeout.
I am launching a mobile site and I want it to have a loading icon while loading all the content and images.
Details:
I have several pages. I want when I click on it will load the pages (to other html page), but I don't want to show the page without fully loaded and I want to show loading animation while it loading all the content. Once, the content is fully loaded. then the loading animation have to hide.
How to do that?
You can make a large <div> at the beginning of the page, then hide it using Javascript in the load event or using an illegal <style> block at the end of the <body>.
You need to give a more specific question to get more specific (useful answers).
In the meantime here are some (hopefully useful) resources:
http://www.devcurry.com/2009/05/display-progress-bar-while-loading.html
http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
http://banagale.com/display-a-simple-loading-message-and-animated-loading-gif-using-javascript.htm
http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/
This one may come particularly if it applies to your situation:
Showing a div while page is loading, hiding when its done
Good luck!
Any number of ways, but you will need javascript.
You are ready when all image assets have been loaded. Define full screen div that covers the whole page. In this div, show e.g. loading spinner animated gif and what ever text you want.
<html>
<head> .. </head>
<body>
<div id="loader"> .. </div>
<div id="content" style="display:none"> .. </div>
<script> .. </script>
</body>
</html>
On your script preload all images. This ensures that they are in cache when they are needed.
<script>
var loadc = 0;
function _preload(path) {
var image = new Image;
image.src = path;
image.addEventListener('load', function() {
loadc++;
if (loadc == images.count) {
$("#loader").hide();
$("#hide").show();
}
// update here progress counter on loading div
};
}
var images = [ '/image/some.png', '/foo/bar.png' ]
$(document).ready(function() {
for (var i = 0 ; i < images.length; i++) _preload(images[i]);
});
</script>
You need to define in images array all assets that you want to be ready when content div is shown, this includes stuff referred from CSS and DOM and possible dynamic DOM. You can use this same method for other assets, like audio and json.
Is there a way to control the load order of images on a web page? I was thinking of trying to simulate a preloader by first loading a light-weight 'LOADING' graphic. Any ideas?
Thanks
Use Javascript, and populate the image src properties later. The # tells the browser to link to a URL on the page, so no request will be sent to the server. (If the src property was empty, a request is still made to the server - not great.)
Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onload or onerror method for each image returns a value.
HTML:
<img src='#' id='img0' alt='[]' />
<img src='#' id='img1' alt='[]' />
<img src='#' id='img2' alt='[]' />
JS:
var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
function loadImage(counter) {
// Break out if no more images
if (counter==imgAddresses.length) { return; }
// Grab an image obj
var I = document.getElementById("img"+counter);
// Monitor load or error events, moving on to next image in either case
I.onload = I.onerror = function() { loadImage(counter+1); }
//Change source (then wait for event)
I.src = imgAddresses[counter];
}
loadImage(0);
You could even play around with a document.getElementsByTagName("IMG").
By the way, if you need a loading image, this is a good place to start.
EDIT
To avoid multiple requests to the server, you could use almost the same method, only don't insert image elements until you're ready to load them. Have a <span> container waiting for each image. Then, loop through, get the span object, and dynamically insert the image tag:
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
Then the image request is made only once, when the element is created.
I think this article https://varvy.com/pagespeed/defer-images.html gives a very good and simple solution. Notice the part which explains how to create "empty" <img> tags with:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
to avoid <img src="">
To display a loading image, just put it in the HTML and change it later at the appropriate moment/event.
Just include the 'loading' image before any other images. usually they are included at the very top of the page and then when the page loading completes, they are hidden by a JS.
Here's a small jQuery plugin that does this for you: https://github.com/AlexandreKilian/imageorder
I've got a web page that automatically reloads every few seconds and displays a different random image. When it reloads, however, there is a blank page for a second, then the image slowly loads. I'd like to continue to show the original page until the next page is loaded into the browser's memory and then display it all at once so that it looks like a seamless slideshow. Is there a way to do this?
is the only thing changing the image? if so it might be more efficient to use something like the cycle plugin for jQuery instead of reloading your whole page.
http://malsup.com/jquery/cycle/
Here is the JS needed if you used jQuery -
Say this was your HTML:
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
Here would be the needed jQuery:
$(function(){
$('div.pics').cycle();
});
no need to worry about different browsers- complete cross browser compatibility.
If you're just changing the image, then I'd suggest not reloading the page at all, and using some javascript to just change the image. This may be what the jquery cycle plugin does for you.
At any rate, here's a simple example
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
function changeImage(){
document.getElementById('myImage').src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
setTimeout(changeImage, 5000);
};
setTimeout(changeImage, 5000);
</script>
This changes the image source every 5 seconds. Unfortunately, the browser will download the image progressively, so you'll get a "flicker" (or maybe a white space) for a few seconds while the new image downloads.
To get around this, you can "preload" the image. This is done by creating a new temporary image which isn't displayed on the screen. Once that image loads, you set the real image to the same source as the "preload", so the browser will pull the image out of it's cache, and it will appear instantly. You'd do it like this:
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();
// when the fake image finishes loading, change the real image
function changeImage(){
document.getElementById('myImage').src = preloadImage.src;
setTimeout(preChangeImage, 5000);
};
preloadImage.onload = changeImage;
function preChangeImage(){
// tell our fake image to change it's source
preloadImage.src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
};
setTimeout(preChangeImage, 5000);
</script>
That's quite complicated, but I'll leave it as an exercise to the reader to put all the pieces together (and hopefully say "AHA!") :-)
If you create two divs that overlap in the image area, you can load one with a new image via AJAX, hide the current div and display the one with the new image and you won't have a web page refresh to cause a the "bad transition". Then repeat the process.
If there's only a small number of images and they're always displayed in the same order, you can simply create an animated GIF.
Back in the dark old days (2002) I handled this kind of situation by having an invisible iframe. I'd load content into it and in the body.onload() method I would then put the content where it needed to go.
Pre-AJAX that was a pretty good solution.
I'm just mentioning this for completeness. I'm not recommending it but it's worth noting that Ajax is not a prerequisite.
That being said, in your case where you're simply cycling an image, use Ajax or something like the jQuery cycle plug-in to cycle through images dynamically without reloading the entire page.