Using AJAX / jQuery to refresh an image

前端未结

关注

 4  1262

生来不讨喜

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 t

相关标签:

4条回答

一整个雨季

2020-12-06 15:30

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.
?>

0 讨论(0)

有刺的猬

2020-12-06 15:31
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! :)
0 讨论(0)
发布评论:

提交评论
- 加载中...

不知归路

2020-12-06 15:40

$(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.

0 讨论(0)

余生分开走

2020-12-06 15:40
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...