How can jQuery fancy refresh an image div?

Question

I have a few camera that uploading images trougth FTP connection.

I whould like to show the latest image with javascript, but I don't want to see white screens while the next image is loading.

I have this code:

<script type="text/javascript"
    src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
    var $img = $('#image1');
    setInterval(function() {
        $.get('https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>&t='+ new Date().getTime(), 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);
});
</script>
<div id="load">
    <img id="image1" src="https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>" alt="kamerakep"/></div>

My problem is: The image is not showing at refresh. The refreshing response appears as such:

ÿØÿàJFIFÿÛC



%# , #&')*)-0-(0%()(ÿÛC



(((((((((((((((((((((((((((((((((((((((((((((((((((ÿÀÐ"ÿÄ   
ÿÄµ}!1AQa"q2¡#B±ÁRÑð$3br    
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ 
ÿÄµw!1AQaq"2B¡±Á    #3RðbrÑ
$4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÝÿÚ? uÝG?ññÿ/øQý»¨ÿÏÏþ8¿á]ÂBæßÅPYÃ&Ëk½ÞrmvÔr¼éGÅmBæãÅsÙÍ.ëkM¾JmfèÐ·8ÉÉõ®e^cÙÇçÿ·u/ùøÿÇü(ö¥ÿ?<¸¿á^¥ý¿©ÿÂªþØûOüLç·¿óßgÝÆ>ï+/\ÿçÂ¸5S÷ú;¼¹¾î38Sò®ÝtªtcÓ×aû

I dont know what is this. It gives me code 200, but no new image. First time the image is showing...

What it is is probably the image bytes being rendered as characters. Open the image file in a text editor and you will see something similar. — Mr. Polywhirl, Mar 04 '15 at 11:28
May be incorrect headers? I see this in headers when the script get my php : `Accept:*/* Accept-Encoding:gzip, deflate, lzma, sdch Accept-Language:hu-HU,hu;q=0.8,en-US;q=0.6,en;q=0.4` — János Tigyi, Mar 04 '15 at 11:33

score 0 · Answer 1 · answered Mar 04 '15 at 11:42

0

I have the answer. This jquery script needs to get the URL of the next image not the image source.

answered Mar 04 '15 at 11:42

János Tigyi

397
1
9
20

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

I suspect your image is in binary format, which cannot be used as value in "src", what you should do is using it in base64.

Here an example: Embedding Base64 Images

Plan B is to update just the link, but as you said probably the browser won't show an image during the fetching process.

edited May 23 '17 at 12:12

Community

1
1

answered Mar 04 '15 at 11:44

pierpytom

1,202
1
12
25

How can jQuery fancy refresh an image div?

2 Answers2