html对象元素显示加载进度

Question

我想在设置html对象元素的data属性后显示加载进度。

这就是我目前的做法：

HTML

<div class=" container row form-horizontal">
    <div id="printModal" class="modal fade in" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg print-dialog">
            <div class="modal-content print-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Print Out</h4>
                </div>
                <div class="modal-body">
                    <div id="detailAlert" class="alert alert-danger display-hide">
                        <button class="close" data-close="alert"></button>
                        <span>Some Errors have occured!</span>
                    </div>
                    <div class="form-group">
                        <object id="pdfbox" style="width: 100%; height: 800px; overflow:hidden"
                                type="application/pdf"></object>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

加载网址

    $('#printModal').modal('show');
    var url = '/PurchaseRequisitions/Print?prId=' + prId;
    $('#printModal').find('object').prop('data', url);

我尝试使用onloadstart和onloadeddata事件来显示一些基本进度，但它们似乎没有被触发;

    $('#pdfbox').on('loadstart', function () {
        alert('common');
        //blockComponent('#printModal.modal-content');
    });
    $('#pdfbox').on('loadeddata', function () {
       // unblockComponent('#printModal.modal-content');
    });

以上两个事件在w3school中有描述，所以不确定我做错了什么，但没有控制台错误。