All geek questions in one place

Jquery.js long delay loading

Using jquery.load () to replace div content works fine, however there is a big performance issue. The page loaded in the div contains some external javascript files and the use of HttpWatch. I noticed the following:

0 0 GET (Cache) text / javascript /js/file1.js
0 0 GET (Cache) text / javascript /js/file2.js
0 0 GET (Cache) text / javascript /js/file3.js
...
etc.

and slightly lower (during the same load ()):

571 129862 GET 200 text / javascript /js/file1.js?_=1263399258240
569 26439 GET 200 text / javascript /js/file2.js?_=1263399258365
572 14683 GET 200 text / javascript /js/file3.js?_=1263399258396
...
etc.

For some reason, the same scripts seem to be loading again. Even worse, the browser appears to be freezing before the files are downloaded again.

Can I prevent jquery files from reloading? All this problem causes about 5 seconds of delay on my page. Also what is the meaning of _ = 1263399258240?

Thanks in advance.

+3
source share
2 answers

jQuery . null , json-, true false . , options load(), jQuery ajax.

.

  • ( ).
  • , ajax ( , , , ),
  • : , ajax.

1:

, , load():

    //first store defaults (we may want to revert to them)
 1: var prevCacheVal = $.ajaxSettings.cache; 
    //then tell jQuery that you want ajax to use cache if possible
 2: $.ajaxSetup({cache: true}); 
    //then call the load method with a callback function 
 3: $(myDiv).load(myURL,function(){
      /* revert back to previous settings. Note that jQuery makes 
         a distinction between false and null (null means never
         cache scripts, false means never cache anything). so it's
         important that the triple-equals operators are used, to
         check for "false" and not just "falsey" */
 4:   if (prevCacheVal === false) $.ajaxSetup({cache: false})
 5:   else if (prevCacheVal !== true) $.ajaxSetup({cache: null});
      //else prev was true, so we need not change anything
 6: });

, , , " " . , jQuery.ajax(), cache . , cache: true jQuery.html();, innerHTML. , jQuery.html(); , , html(); - - , , , .

2: ( )

, , ajax, $.ajaxSetup({cache: true}); load(), :

 $.ajaxSetup({cache: true}); 
 $(myDiv).load(myURL);

3:

, myURL (, ), , -ish/random myURL, :

 $.ajaxSetup({cache: true}); 
 $(myDiv).load(myURL + "?myuniquetime=" + Date.getTime()); 
 /* getTime() is milliseconds since 1970 - should be unique enough, 
    unless you are firing of many per second, in which case you could
    use Math.random() instead. Also note that if myURL already includes
    a URL querystring, you'd want to replace '?' with '&' */
+2

-:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>
    <div id="load1"></div>
</body>
</html>
<script>
$(function(){

    $.ajax({
        type: "GET",
        cache: false,
        url: "load1.html",
        success: function(data){
            $("#load1")[0].innerHTML = data;
        }
    });

});
</script>

load1.html:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js1.js"></script> 
</head>
<body>
    <div>html 1</div>   
</body>
</html>
0

Source: https://habr.com/ru/post/1728453/

More articles:


All Articles