Question

我正在开发一个jquery移动应用程序，其中有一个列表菜单，当点击菜单项时，我在主UL中呈现一些内容，

我想显示加载图片或某种进度条，直到执行该功能，将数据加载到主Div中。

我试过了，但它无法正常工作

// my function 
$('ul#playListUl').on('click', 'li', function(evt) {

$.blockUI({ message: '<h1><img src="../../css/images/ajax-loader.gif" />Loading PlayList...</h1>' });  // Not working     

/*
Lot of Business logic goes here, But no ajax calls
I am loading data from localStorage and creating LI elements dynamically
and populating it into the main UL
*/ 

 $.unblockUI(); // Not working

我尝试过的另一件事是

$.mobile.loading('show'); at the very beginning of the above function and
$.mobile.loading('hide'); at the end of the above function.

但这也不起作用

我在我的代码中使用了以下js版本

Jquery mobile 1.3.2 Jquery 1.9.0

Android / Web开发人员对您的帮助表示赞赏。

这是我的代码与奥马尔的建议，但仍然没有用。

    $('ul#playListUl').on('click', 'li', function(evt) {

    // $.mobile.loading('show');

    setTimeout(function () {
        $.mobile.loading("show", {
            text: "loading videos..",
            textVisible: true
        });
    }, 250);

    //var current = evt.currentTarget;
    var $li = $(this);  
    //console.log(" current target :: "+$(current));
    console.log(" this :: "+$li.attr("data-vmapp-val"));
    // clear the contents
    $videoContainer = $("ul#video-list");
    $videoContainer.html("");

    // first check if the li elements list in localstorage, if yes pull it from there.
    var liElementList = localStorage.getObj($.trim($li.attr("data-vmapp-val")));

    var myPlayList = localStorage.getObj('myPlayList');
    var favouritePlayList = localStorage.getObj('favouritePlayList');

    if (liElementList) {
        $videoContainer.html(liElementList);
        var liElementList = $videoContainer.find('li');
        _.each(liElementList, function(element, index, list) {
            var $liElement = $(element);
            var videoId = $liElement.attr('data-video-id');
            // if the element is in favourite playlist then select it
            if (_.indexOf(favouritePlayList, videoId) != -1) {
                $liElement.find('a.starButton').addClass('starSelected');
                //.remove();
            }
            if (_.indexOf(myPlayList, videoId) != -1) {
                $liElement.find('a.addButton').addClass('plusAdded');
                //.remove();
            }
        });
        $.mobile.loading('hide');
    } else {
        var videoListMap = localStorage.getObj('videoListService');
        var videoIdListVal = videoListMap[$.trim($li.attr("data-vmapp-val"))].videoIdList;
        /*
         * <li>
         *      <img>
         *      <div1><info>
         *      <div2><a>
         * </li>
         * "avg_rating": " 3.21",
          "likes": " 480",
          "dislikes": " 389",
          "total_views": "348531",
          "title": "Go Diego Go! English Episode for Children - 2013 (Dora the Explorer Friend)",
          "thumbnail": "http://i.ytimg.com/vi/9-4ki20O6DI/default.jpg"
         * */
        var videoIdBasedMap = localStorage.getObj("videoIdBasedMap");

        $videoContainer = populateVideoContents(videoIdListVal, videoIdBasedMap, null, favouritePlayList, myPlayList);          
        // store the li list in localstorage
        localStorage.setObj($.trim($li.attr("data-vmapp-val")),  $videoContainer.html());
        $.mobile.loading('hide');
    }
    // console.log("video UL :: "+$videoContent.html());
    // refresh the UL
    $videoContainer.listview("refresh");

    // refresh the control group div
    $("#demo-page").trigger("create");
    $('div#headerDiv').find('h1').html("Showing Videos from PlayList");
    $('div#headerDiv').find('h1').attr("data-playlist-name", "");

});

在执行JS功能期间显示加载图像

0 个答案: