How can I reliably preload and cache my ajax loadi

2019-06-24 00:56发布

站内问答 / jQuery
1054 9 4

I added the following code to my asp.net-mvc site.master page with the goal is making sure this image gets loaded upfront and cached (as I use it all over my site):

enter image description here

    $(document).ready(function () {

        var x = new Image();
        x.src = "/content/images/ajax-loader.gif";

I am assuming this code would force a preload and cache of this ajax loading image but when i run a page that references this image, i still see this for a few seconds. Here is an example of a jqgrid loading div

enter image description here

which uses this code for loadtext:

 $.jgrid = $.jgrid || {};
 $.extend($.jgrid,{
   defaults : {
    recordtext: "View {0} - {1} of {2}",
    emptyrecords: "No records to view",
    loadtext: "Loading Data ...<img src='/Content/Images/ajax-loader.gif' />",
    pgtext : "Page {0} of {1}"
},

before my actual ajax loading image shows like below:

enter image description here

Is there any suggestion for what could be causing this and how to ensure this image is loaded and cached prior to trying to use it? Is my solution actually redownloading the file each time?

What is the best recommendation here for how to achieve my goal?

9条回答
神经病院院长
2楼-- · 2019-06-24 01:56

You can preload the image:

function preloadImage(images) {
    $(arrayOfImages).each(function(){
        (new Image()).src = this;
    });
}

$(document).ready(function () {
    preloadImage([
        '/content/images/ajax-loader.gif'
    ]);
...
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-06-24 01:57

According to the specifications given by the W3C, URL's are in fact case-sensitive.

Of course, in a windows file system, case doesn't matter, so for the server these two are the same file

/content/images/ajax-loader.gif
/Content/Images/ajax-loader.gif

The server will serve the image regardless of what case you use (on Windows).

However, all browsers actually follow the specifications for URL's, and will treat those two URL's as two different resources.

To the browser, those are two different files, caching one won't cache the other.

In other words, you're caching one resources, and then loading a completely different resource, because you're not using the same case.

Make absolutely sure that you type the URL exactly the same, and genereally just using lowercase is the way to go

$(document).ready(function () {

    var x = new Image();
    x.src = "/content/images/ajax-loader.gif";

    $.jgrid = $.jgrid || {};
    $.extend($.jgrid,{
      defaults : {
        recordtext: "View {0} - {1} of {2}",
        emptyrecords: "No records to view",
        loadtext: "Loading Data ...<img src='/content/images/ajax-loader.gif' />",
        pgtext : "Page {0} of {1}"
     },
   .......
查看更多
0人赞 添加讨论(0) 举报
The star\"
4楼-- · 2019-06-24 02:00

<body><img src="content/images/loader.gif" style="display: none" />

It could be simply src="i/l.gif" if you loose the content/images folder in favor of a folder named i and give common images a small name to save bandwidth.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)