почти закончил со скриптом для загрузки изображений с Ajax

0

Я пытаюсь создать сценарий для загрузки изображения (1 - 5), и когда он загрузится, он изменит источник текущего изображения. При загрузке изображения винт загрузки отображается. Но сценарий еще не готов, и мне нужна помощь, чтобы завершить его. Помощь и рекомендации приветствуются!

Я не уверен, как я должен обработать URL и получить новое изображение? С jQuery .html(<img src.....? И я не уверен, как изменить src текущего изображения. Возможно, я ошибаюсь, и если есть лучший способ решить это, я оцените некоторые предложения о том, как я могу изменить код.

Автор сценария:

$(document).ready(function(){

var res = {
loader: $('<div />', {class: 'loader'}),
container: $('.galleryContainer')
}

var img = $("#mainImage");

$("#menu ul li a").click(function() {

var btnNum = $("a").index(this);
var imgFile = "images/bella-sky-hotel-" + btnNum + ".jpg";

$.ajax({
    url: ??,
    beforeSend: function() {
        res.container.append(res.loader);
    },
    success: function(data) {
        // Change src of current image
        mainImage.attr({src: $(this) ????
        // Remove loader
        res.container.find(res.loader).remove();
    }
});
});
});

Html:

<body>
<div class="galleryContainer">
<img src="images/bella-sky-hotel-1.jpg" id="mainImage" />
</div>

<div id="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>

  • 0
    Вызов ajax просто получает само изображение или из источника данных?
  • 0
    @MarkS Хммм Я думаю, что моя мысль была о получении источника данных !? Или я могу просто загрузить строки тега img из php-файла?
Показать ещё 2 комментария
Теги:

1 ответ

0 
   $(document).ready(function(){

 var res = {
loader: $('<div />', {class: 'loader'}),
container: $('.galleryContainer')
}

var img = $("#mainImage");

$("#menu ul li a").click(function() {

var btnNum = $("a").index(this)+1;//because 0 based
var imgFile = "images/bella-sky-hotel-" + btnNum + ".jpg";

    res.container.append(res.loader);// Change src of current image
    mainImage.attr({src: imgFile})
    // Remove loader
    res.container.find(res.loader).remove();

 });
 });
Поделиться
  • 0
    Спасибо за код, но действительно ли это загружает данные изображений? Или как это работает?
  • 0
    так что вы хотите получитьImageData, а затем делать то, что с? Ответь на мой вопрос, тогда я отредактирую свой ответ. Я думаю, что вы должны загрузить эти данные в виде string. Это просто, поэтому используйте Ajax для загрузки строки на стороне сервера. Ваш URL-адрес на стороне сервера должен иметь возможность вернуть вам строку, представляющую реальные данные изображения.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню