можете ли вы помочь мне добавить "throbber" к этой функции ajax

#jquery #throbber

Вопрос:

По сути, на моей странице изображение вызывается div#imagebox при выполнении функции. Но иногда изображение большое и может занять некоторое время для загрузки, особенно если оно еще не было загружено в кеш. Я хотел бы уведомить пользователя о том, что запрос обрабатывается. Я думаю, что смогу сделать это с помощью throbber. Я бы хотел, чтобы throbber отображался div#imagebox до тех пор, пока изображение не будет готово. Тогда я бы хотел, чтобы throbbber исчез.

Я просмотрел эту страницу http://plugins .jquery.com/project/throbber но я действительно не понимаю, что я должен делать.

Могу ли я добавить что-то подобное $("div#imagebox").throbberShow(true); в существующую функцию (см. Ниже?) Но где я мог бы его добавить? Нужен ли мне параметр true ?

Спасибо за вашу помощь.

  function showImage(ms, pid)     
 {
   $.get("../msimages/image.php", {ms: ms, pid: pid}, function(txt)        
    {        
      $("div#imagebox").html(txt);    
    }); 
 }

1. Никогда не делайте $('div#imagebox') . Это намного медленнее, чем просто $('#imagebox') .

2. хорошо — я этого не знал. Я постоянно добавляю туда префикс div. Я перестану это делать 🙂

Ответ №1:

В вашем случае, похоже, вы бы добавили его следующим образом. Я не считаю, что параметр true необходим:

 function showImage(ms, pid)     
 {
   $.throbberShow({ajax: true, parent: imagebox); // add this line.
   $.get("../msimages/image.php", {ms: ms, pid: pid}, function(txt)        
    {        
      $("div#imagebox").html(txt);    
    }); 
 }

Это должно загрузить изображение в #imagebox, и когда загрузка ajax завершена, оно должно перезаписать все, что там есть.

1. хорошо, отлично, я попробую — могу я также спросить: есть ли встроенный образ throbber в библиотеке jquery? Как скрипт узнает, где взять анимацию?

2. Похоже, он использует throbber.gif который находится в загрузке по умолчанию, если он находится в нужном месте, но он показывает, что вы можете указать свое собственное изображение в образцах.

3. Поскольку у меня недостаточно репутации, я не могу ответить на свой собственный вопрос, но после некоторой работы я понял, что ответ, который вы дали, нуждается в небольшой модификации. $.throbberShow({ajax: true, parent: imagebox}); ajax: true Параметр не обязательно должен быть там, поскольку этопо умолчанию, но parent: imagebox параметр является ключевым. Моя основная проблема заключалась в попытке использовать цель ajax div в качестве селектора — когда он должен быть одним из параметров опции throbberShow . Мне потребовалось некоторое время, чтобы понять это.