I have these two php variables: $img1src and $img2src, (them being PHP is irrelevant as you can echo a php variable anywhere) they both hold a URL of an image. I was wondering if I was able to preload these images, or cache them.
My goal is: when someone refreshes the page I want these pictures to instantly appear in a <img src >.
I'm not going to provide specific code, because I don't want to give you a fish, but rather show how google is a fishing pole.
I googled "php cache images tutorial" just to see what would come up. Below is a great resource.
http://dtbaker.com.au/random-bits/how-to-cache-images-generated-by-php.html
Can't get much better than that.
Caching an image isn't really a job for PHP. PHP should be used to decide whether or not to display it. (There are caching things you can do with PHP, but not in the same sense.) Essentially, what you want to do is make the clients browser request the second image. Once the browser gets the image, it should automatically send an "if-modified-by" parameter in the header. Next time you load the page, the response code should be 304 and your image should load instantly. You can choose from a variety of ways to do this. Load the image with javascript after the page has loaded (to prevent additional load time) or you can just include an image tag that is hidden on the page some where.
I also haven't tested it, but you might be able to send an ajax request to the image directly. I'm not sure if that way would cache it or not.
EDIT:
This isn't the most elegant solution, but it should get the idea across.
JS Example:
<?php
session_start();
if (!isset($_SESSION['graphic'])) $_SESSION['graphic'] = "http://www.tomsfreelance.com/laptop/DSC_0011.JPG";
else $_SESSION['graphic'] = "http://www.tomsfreelance.com/laptop/DSC_0012.JPG";
?>
<html>
<head>
<script>
function loadImage() {
document.getElementById('preload').style.backgroundImage = "url(http://www.tomsfreelance.com/laptop/DSC_0012.JPG)";
}
</script>
</head>
<body onload="loadImage();">
<div id="preload" style="display: none;"></div>
<img src="<?php echo $_SESSION['graphic'];?>">
</body>
</html>
Sure you can, try this javascript:
var image1 = new Image(), image2 = new Image();
image1.src = <?php echo $img1src; ?>;
image2.src = ?<php echo $img2src; ?>;
That should preload the image so when you append an img tag to the DOM the image should appear right away.
If your aim is to make less http requests overall: you can try CSS Sprites and/or Data Url methods of displaying these images. These methods will be the most effective when the images are smaller.
Related
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
I have created a page in which I am showing A websites Page (situated some where on web );
I used iframe but puzzled with the height issues I solved width issues for 950px only with css3 but my need is full height as target website but that is not working with cross domain pages (I've done with same domain successfully).
Now I want to do it either with PHP using get_file_content() or some other putting it into div , iframe or in frames whatever works (and also pages must be accessible as it is from main sites)
The container will change its content with hyper link click.
Please help me to resolve the issues.
I've tried many more methods including jquery, js, php, css and blah blah blah with no success.
before commenting or answering please visit THIS LINK
I need some thing like this
Please check this and alter here
To See My page Click here
Note:
I have no access of target site so I can't put attributes on target
page and get back to iframe page.
I have 100+ pages to show so no
specific method can be used i need any generalized technology.
One more thing i don't want scrolling in my page.
Efforts done :
Ajax/Jquery
PHP Resize
In the "iframe'd" html, have:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
and in the page that iframes:
<script type="text/javascript">
function resize_iframe(new_height) {
document.getElementById('iframed').style.height = parseInt(new_height, 10) + 60 + 'px';
}
</script>
I used 60px to fix potential padding etc.
Note that they have to be under the same domain for this to work, otherwise you might have to run:
<script type="text/javascript">
document.domain = "domain.com";
</script>
On either or both. This is required so that the browser may interact between them.
Do something like this:
<frameset rows="*">
<frame frameborder=0 src="http://www.discountautoparts.com/" scrolling="auto" noresize>
</frameset>
If you do that it should look like this picture
I know there has to be a better way to do this.
Currently I have a php script which will generate a random image from a certain directory when called.
I have div's calling the background.php file in the stylesheet under the div's background setting
background:url(randomimagescript.php);
There are a lot of little div's on this page right now, all calling separate random image php scripts... is there a way I could use a variable when calling the file, so I can just use one script? I still need to have good styling control over the image, so i'm not sure if there is a better option than calling the script as a background image for a div.
If anyone has any ideas, let me know!
try this (it might not be optimal):
background:url("randomimagescript.php?folder=myfolder");
and in randomimagescript.php:
<?php
$folder = #_$REQUEST['folder'];
$url = "galleries/$folder/thumbs/image.jpg"; // ie, compose image
http_redirect($url); // go and find the image.
?>
It sounds a little crazy, but you could actually make your stylesheet be generated by PHP, and just fill in the blank, so to speak.
background:url(<? echo pickRandomImage(); ?>)
set the background for all divs once on the page using jquery
var image = <?echo randomimagescript.php?>
$("div").css('background', 'url('+ image+ ')');
I have a product gallery in which the product images will be retreived from the server and shown. It takes sometime for all the images to be retrieved and displayed. I want to show a loading image until the image is rendered from the server.
I have tried as below, by giving an if condition to display a loading image until the image tag gets its source. But its not working, as it just shows a blank space until the image get retrieved from the server.
if($image)
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="<?echo $image;?>"><?
}
else
{?>
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
<?
}
Please tell me how can i make it work as expected
Well, you'd have to use JavaScript to update the DOM as you'd like to, as PHP will only process the page once. Doing so would mean switching to AJAX to retrieve the images, though, and that feels a bit like overkill for your scenario. Instead, why not give each image its own container, and then give that container a class with a loading image as its background? Then. once the image has loaded, it displays over the previous loader.
You can not do that on the server side alone. One would need to first load simple "snake" images on the php side:
<img style='Max-width:180px;' alt="Nike Women Sweet Classic High Purple Casual Shoes" src="media/images/snake.gif">
and then through javascript (ajax requets) update all the images like so:
// populate imageList
$.ajax({
url: 'your_server_script',
data: imageList,
success: function(response) {
// update teh src property for the images here usign your server response
}
})
As #ranksrejoined pointed out, however, you might be better off using css to give images a container with widht/height and background image. Then that one gets overridden by the image itself.
I think this is what you need: http://jqueryfordesigners.com/image-loading/.
I think you're suggesting an asynchronous load of the image - you may want to use JavaScript for that. Something you may like to try as alternative, is to apply a background image to a container for each child image.
<div style="background-image: ;">
<img />
</div>
Since lowsrc is deprecated, my best next choice would be Lazy Loading.
That means you only load images that can be seen on the screen right now, and not the images that the browser chooses to load, which can be down the page.
If you use JQuery, then take a look at the nice LazyLoad plugin. Definitely going forwards this time :)
Suggested implementation
you would load the jquery plugin, and write your images like this :
<img data-original="<?php echo $image; ?>" src="media/images/snake.gif">
and let the plugin do the hard work
Hope it helps !
Thanks in advance for your help with this. I've got a very simple PHP file that returns HTML code for an image based on some passed parameters. The code works fine, and the image shows up quickly. However, the page itself doesn't finish loading for a good 5 seconds, which is interfering with some AJAX calls I'm trying to do. Firebug says the time breakdown is like this:
0ms: DNS lookup
0ms: Connecting
0ms: Queuing
211ms: Waiting for response
14ms: Receiving data
+5.32s: 'DOMContentLoaded' (event)
+5.33s: 'load' (event)
Here's my PHP code:
<?php
$getimage = $_GET['p'];
$getcity = $_GET['c'];
?>
<img src="/images/photos/big/<?php echo $getcity; ?>_<?php echo $getimage; ?>.jpg" alt="" class="gallery" />
Pretty simple, no? Any idea what's going on?
This page is using "/images/photos/big/" which I assume means it's using a "big" image. images take time to render, this is likely the slowdown.
you might be able to speed this up by setting the image height and width because the DOM will not know where everything is placed until the image size is known. I am not positive if this will fix the problem, sorry.