Это, наверное, простой вопрос, но я в тупике и просто не знаю с чего начать.
У меня есть PHP-скрипт (image_feed.php), который возвращает URL-адрес изображения. Каждый раз, когда этот URl называется, он возвращает последнее доступное изображение (изображение меняется каждые пару секунд).
Я хочу, чтобы, когда страница загружается, есть вызов AJAX для image_feed.php, который возвращает последний URL-адрес. Этот URl затем вставляется в HTMl, заменяя соответствующее изображение src.
Через 5 секунд я хочу, чтобы процесс повторялся, и для обновления изображения. Однако я не хочу, чтобы изображение менялось местами, пока оно не закончило загрузку, и я хочу избежать появления пробела перед загрузкой нового изображения.
На данный момент у меня есть следующий jQuery, который просто загружает возвращаемое значение image_feed.php непосредственно в div с именем # image1. image_feed.php правильно отформатирован для предоставления тега изображения html.
$(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); }); Это работает, но есть проблема. Я получаю пустое пространство размером с изображение в IE и Firefox каждый раз, когда изображение обновляется, потому что для загрузки требуется некоторое время.
Я знаю, что мне нужно для image_feed.php, чтобы вернуть простой URL-адрес изображения. Затем я использую некоторый jQuery для запроса этого URL-адреса, предварительно загружаю его и затем заменяю его существующим изображением.
Тем не менее, я все еще изо всех сил пытаюсь добраться куда угодно. Может ли кто-нибудь быть таким добрым, чтобы дать мне несколько указателей / помощи?
$(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); });
Непроверенные. Код выше должен загрузить новое изображение в фоновом режиме, а затем установить атрибут src старого изображения при загрузке.
Обработчик событий для загрузки будет выполняться только один раз. .complete проверка необходима для браузеров, которые могут кэшировать загружаемое изображение. В таких случаях эти браузеры могут или не могут инициировать событие load .
Ты можешь. Когда вы хотите что-то перезагрузить, вы можете просто добавить поисковый запрос, чтобы он обновлял исходный код.
Например, когда есть часто изменяющееся изображение (например, captcha), и вы хотите загрузить его снова, не обновляя браузер, вы можете сделать так:
Исходный код:
<img src="captcha.png" alt="captcha" />
Обновленный код:
<img src="captcha.png?1" alt="captcha" />
Используемый здесь сценарий будет справедливым:
var d = new Date(); $('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds());
Надеюсь это поможет! 🙂
Подумайте, если вам нужно снова получить URL-адрес с сервера, для нового URL-адреса изображения вы можете сделать так:
$.ajax({ url: 'getnewimageurl.php', success: function(data) { $('img').attr('src', data); } });
Сервер должен возвращать в него только новое имя изображения. Например, PHP код должен быть таким:
<?php $images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii"); die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images. ?>
Я предлагаю вам использовать плагин jQuery 'onImagesLoad'. Это дает вам обратный вызов, когда изображение закончит загрузку.
Когда вы получаете новый URL изображения с сервера, вы создаете новый объект <img с src="new_url_from_server" и присоединяете 'onImagesLoad' обратный вызов 'onImagesLoad' . Когда вы вызываете обратный вызов, ваше изображение закончило загрузку.
Теперь вы можете просто заменить атрибут src старого объекта img на new_url_from_server. Поскольку новое изображение уже доступно в кеше, оно не будет загружено снова и будет немедленно отображено!
Упрощенно вы можете скрыть старое изображение и добавить это новое изображение в DOM (не требуется, если выше работает правильно)
Пример с некоторыми голыми костями может выглядеть следующим образом:
<!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://img.ruphp.com/php/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://img.ruphp.com/php/verybig.jpg'); }) } }); </script> </body> </html>