I have a page which will display photos. I want it to load the thumbnail version of the photo, but when I come to print it should display the highres version.
The photo's are loaded using PHP (imagecreatefromjpeg).
src=\"php/generateimage.php?imgname=".$_SESSION['ROOT_PATH']."data/images/".$value2['location']."&restraint=".$restraint."\"
I have found that by using "display:none" the generateimage.php is not creating the image for print. And when I come to print them, which changes the images to "display:block-inline" the images simply are not available.
Using "visibility:hidden" still loads the images into memory which slows the computer down which is why I don't really want to display them before printing.
I hope this makes sense?
Why not open a new window, load the image, then initiate the print?
<img src="http://lorempixel.com/output/food-q-g-640-480-8.jpg"><br>
<button onclick="printImage();">Print</button>
<script>
function printImage() {
var popup = window.open();
var img = popup.document.createElement("img");
img.src = "http://lorempixel.com/output/food-q-c-640-480-8.jpg";
img.onload = function() {
popup.print();
popup.close();
};
popup.document.body.appendChild(img);
}
</script>
Fiddle (Instead of low quality and high quality, it's gray-scale and color)
Related
I need some php code which has a defined window size, if size is true run the page if not redirect to another page. I will manage the window size using an iframe. Is it possible with php? If not is there another way.
this is a little javacript that checks the width and height then sets the document location if it isnt wht you specified, but it is being echoed from php. you can play with the maxheight, max width and url variables.
<?php
$jssnippet = "<script type='text/javascript'>var width = window.innerWidth;
var height= window.innerHeight;
var maxheight=480;
var maxwidth=360;
var redirecturl='http://www.xl21.org';
if((width>maxwidth) && (height>maxheight)){document.location=url; }</script>";
echo $jssnippet;
?>
PHP can't possibly know the window size.
This is a task for JavaScript.
Example of getting window size with JS
This is probably a simple question but I am stumped and just don't know where to start.
I have a PHP script (image_feed.php) that returns a URL to an image. Every time this URl is called it returns the latest image available (the image changes every couple of seconds).
What I want to happen is that when the page loads, there is an AJAX call to image_feed.php, which returns the latest url. This URl is then inserted into the HTMl replacing the appropriate image src.
After 5 seconds, I want the process to repeat, and for the image to update. However, I don't want the image to be swapped until it has finished loading, and I want to avoid a white space appearing before the new image loads.
At the moment I have the following jQuery, which simply loads the return value of image_feed.php directly into a div called #image1. image_feed.php is correctly formatted to provide a html image tag.
$(document).ready(function(){
var $container = $("#image1");
$container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>')
var refreshId = setInterval(function()
{
$container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>');
}, 5000);
});
This works, but there is a problem. I get a white space the size of the image in IE and Firefox every time the image refreshes, because the image takes a while to download.
I know what I need to is for image_feed.php to return the plain URL to the image. I then use some jQuery to request this URL, pre-load it and then swap it with the existing image.
However, I'm still struggling to get anywhere. Could someone be so kind as to give me some pointers / help?
$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});
Untested. Code above should load the new image in the background and then set the src attribute of the old image on load.
The event handler for load will be executed only once. The .complete check is necessary for browsers that may have cached the image to be loaded. In such cases, these browsers may or may not trigger the load event.
You can. When you want to reload something, you can just append a search query, so that it refreshes the source.
For Eg., when there is a frequently changing image (say captcha) and you wanna load it again, without refreshing the browser, you can do this way:
Initial Code:
<img src="captcha.png" alt="captcha" />
Refreshed Code:
<img src="captcha.png?1" alt="captcha" />
The script used here would be just:
var d = new Date();
$('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds());
Hope this helps! :)
Consider, if you have to fetch the URL again from the server, for a new image URL, you can do this way:
$.ajax({
url: 'getnewimageurl.php',
success: function(data) {
$('img').attr('src', data);
}
});
The server should return only a new image name in it. For eg., the PHP code should be this way:
<?php
$images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii");
die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images.
?>
I suggest you use jQuery 'onImagesLoad' Plugin
This provides you with a callback when an image has finished loading.
When you receive new image URL from server, you create a new <img object with src="new_url_from_server" and attach 'onImagesLoad' callback to it. When your callback is called, your image has finished downloading.
Now you can just replace the 'src' attribute of old img object with new_url_from_server.
Since new image is already avaiable in cache, it will not be downloaded again and will be immediately displayed!
Aletrnatively, you can hide the old image and add this new image to DOM (not required if above works correctly)
Some bare bones sample could be like this:
<!DOCTYPE html>
<html>
<body>
<img id='bla' src="10.jpg" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.onImagesLoad.js"></script>
<script type="text/javascript">
$(function(){
var img = $('<div><img src="http://myserverbla/images/verybig.jpg"></img></div>');
img.onImagesLoad({
all : allImgsLoaded
});
function allImgsLoaded($selector){
var allLoaded = ""; //build a string of all items within the selector
$selector.each(function(){
$('#bla').attr('src','http://myserverbla/images/verybig.jpg');
})
}
});
</script>
</body>
</html>
I am using the following script to display big images on mouse over the small images (example photo attached in the last). I want to show the 'loading' image (like this) while the big image is being downloaded from the server. How can this be achieved?
Note: I have asked a similar question here but I was not successful in applying the append function to the following code. Please help.
<script type="text/javascript">
function showIt(imgsrc)
{
var holder = document.getElementById('imageshow');
var newpic= new Image();
newpic.src=imgsrc;
holder.src=imgsrc;
holder.width = newpic.width;
holder.height=newpic.height;
}
</script>
<body>
/***on hover, xyz.jpg will be replaced by bigA.jpg and so on***/
<img src="smallA.jpg" onMouseOver="showIt('bigA.jpg')"/>
<img src="smallB.jpg" onMouseOver="showIt('bigB.jpg')"/>
<img src="xyz.jpg" id="imageshow" />
</body>
Images have a load event. As long as you set the load handler before the image.src is set, you should get notified when the image has successfully loaded or encounters some kind of error in loading. I do that very thing in a slideshow that I wrote so I know when the next image is ready for display and I display a wait cursor (animated gif like you're wanting) if the image has been delayed more than one second beyond it's appointed display time so the user knows what's going on.
In general, you can do something like this:
function loadImage(url, successHandler, errorHandler) {
var myImg = new Image();
myImg.onload = myLoadHandler; // universally supported
myImg.onabort = myErrorHandler; // only supported in some browsers, but no harm in listening for it
myImg.onerror = myErrorHandler;
myImg.src = url;
function myLoadHandler() {
successHandler(myImg, url);
}
function myErrorHandler() {
if (errorHandler) {
errorHandler(url);
}
}
}
Using code like this, you can display the wait cursor when you initiate the image load and hide it when the successHandler gets called.
If there were any other listeners to these events, then you should use addEventListener or attachEvent instead of onload, onabort, onerror, but if there's only one listener, you can go either way.
If the desired images are known in advance, then it's sometimes a better user experience (less waiting) to preload images that may be used later. This gets them into the browser's memory cache so they will appear instantly when needed. One can preload images either in HTML or in JS. In HTML, just insert tags into the web page for all the desired images (but hide them with CSS). In JS, just create an image array and create the image objects:
// image URLs to preload
var preloadImageURLs = [
"http://photos.smugmug.com/935492456_5tur7-M.jpg",
"http://photos.smugmug.com/835492456_968nf-M.jpg",
"http://photos.smugmug.com/735492456_3kg86-M.jpg",
];
var preloads = []; // storage for preloaded images
function preloadImages() {
var img, i;
for (i = 0; i < preloadImageURLs.length; i++) {
img = new Image();
img.src = preloadImageURLs[i];
preloads.push(img);
}
}
This will cause all the images in the preloadImageURLs array to be preloaded and available instantly later on in the life of the web page, thus preventing any user delays while waiting for images to be loaded. Obviously, there's a short amount of time for the preloaded images to actually get loaded, but for smallish images that usually happens before the user interacts with the web page so it makes for a faster feel to dynamic parts of the web page that use images.
<img id=access src=loading.gif>
<script>
window.onload=function(){
document.getElementById('access').src='access.jpg';
}
</script>
Hope this helps.
I have a standard webpage developed in php using CSS and currently a bit of javascript to cycle through some images for a offers div. You can see the site here, this will not be it's final resting place this is a temporary site. If you look at the offers banner. When it switches to the next image it goes white whilst it loads the next image. Is there anyway of loading the next image before applying it to the div background property?
Here is my javascript atm.
var c=0
var s
function offersCycle()
{
if (c%3==0){
document.getElementById('offers').style.background = "url(/images/1.jpg)";
}
if (c%3==1){
document.getElementById('offers').style.background = "url(/images/2.jpg)";
}
if (c%3==2){
document.getElementById('offers').style.background = "url(/images/3.jpg)";
}
c=c+1
s=setTimeout("offersCycle()",8000)
I tried using a set of new Images in the javascript and defining them before cycling them but they wouldn't apply to the CSS as this relies on a url and not an image itself? Any ideas appreciated.
Cheers,
Jordan
I would do something like this:
var c = 0, images = ["/images/1.jpg", "/images/2.jpg", "/images/3.jpg"];
for(var i=0; i<images.length; i++) {
var img = new Image();
img.src = images[i];
}
function offersCycle() {
document.getElementById('offers').style.background = "url("+images[c%images.length]+")";
c++;
}
var s = setTimeout(offersCycle, 8000);
By using an array, we simplify the logic and can use the same array to preload the images to cache them when the page first loads. This also allows you to add as many images as you want to the array without changing anything.
You could preload the images using Javascript.
Details here: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
I have put together a script which is very much like the flickr photostream feature. Two thumbnails next to each other, and when you click the next or prev links the next (or previous) two images slide in. Cool!
Currently when the page loads it loads the two images. The first time nxt / prv is used then the next two images or previous two are loaded via ajax, with the id of the first image being passed in the url and the HTML for the two new images returned and displayed via ajax.
simple enough, but it got me to thinking, on a slow connection, or heavy server load then the two images, although relatively small thumbnails could still take a while to load, and the nice things with sliding panes is the fact that the hidden data slides in quickly and smoothly preferbly without a loading delay.
So I was wondering from a performance and good practice point of view which option is best, this is what I can think of for now, open to suggestions.
1, call each set of images via JSON (its supposed to be fast?)
2,load all the possible images into a json file and pull in the details that way - although browser will still have to load image. Plus sometimes there might be 4 images, other times there could be upto 1000!
3, Load 10 images via php into a Json or other file, and load all 10 images into the browser hiding the 8 which are not on show, and always showing the middle two. Problem here is that each time someone clicks, the file has to reload the first and last images, which still takes up time, although i suppose the middle images will have all been cached via the browser by now though. But still there is a loading time.
4, Is it possible to have a json image with all the image details (regardless of numbers) and use no 3 above to load 10 of those images, is it possible to use ajax to only read 10 lines and keep a pointer of the last one it read, so the json file can be loaded fast, short refresh and images either side are cached via the browser!!
Hope thats clear, any suggestions on how you would handle this?
To preload an image from Javascript, you don't need to do anything that sounds like AJAX or JSON. All you need is this:
var img = new Image();
img.src = "http://example.com/new/image.jpg";
The browser will quite happily load the image in the background, even though it's not displayed anywhere. Then, when you update the src field of another (displayed) image tag, the browser will immediately show the part of the image it's already loaded (hopefully all of it).
Fetching JSON Via Ajax will just slow you down.
You're better off using inline JSON and generated Javascript.
<?php
$images = array( "foo.jpg","bar.jpg" );
?>
<script type="text/javascript">
jQuery(function($){
var images = ( <?php echo json_encode($images); ?> );
/* Creating A Hidden box to preload the images into */
var imgbox = document.createElement("div");
$(imgbox).css({display: 'none'});
/* Possible Alternative trick */
/* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
$('body').append(imgbox);
$.each( images , function( ind, item )
{
#Injecting images into the bottom hidden div.
var img = document.createElement("img");
$(img).src("/some/prefix/" + item );
$(imgbox).append(img);
});
});
</script>
In the case where you want to concurrently preload a larger number of resources, a little ajax can solve the problem for you. Just make sure the caching headers are such that the browser will use the resources on the next request. In the following example, I load up to four resources concurrently.
<script>
var urls = [
"a.png",
"b.png",
"c.png",
"d.png",
"e.png",
"f.png"
];
var currentStep = 0;
function loadResources()
{
if(currentStep<urls.length){
var url = urls[currentStep];
var req = GetXmlHttpObject();
update('loading ' + url);
req.open("GET", url, true);
req.onreadystatechange = getUpdateState(req, url);
req.send(null);
} else {
window.location = 'done.htm';
}
}
function getUpdateState(req, url) {
return function() {
var state = req.readyState;
if (state != 4) { return; }
req = null;
setTimeout('loadResources()', 0);
}
}
</script>
<!-- This will queue up to four concurrent requests. Modern browsers will request up to eight images at time -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">
Why not use text and replace the text with a picture code (works in php really nice with ajax up to 500 pictures and more)?