How to force ie10 to download page completely?

Asked

Viewed 403 times

2

I have a page that is actually quite simple, with html and a canvas with only a few lines, nor bootstrap I’m not using.

And she simply "aborts" the download of various elements, as some CSS images and/or files... (I can check this at [F12] [network]) Alias if I give several F5, some elements start to be loaded...

BUT, when I am accessing site by right clicking on the index.html file everything gets 100% in place!

So I was wondering if you had any way to force a full load of the page? mainly because in Chrome, Firefox, Vivaldi, safari, ie11, opera... everything works fast and smoothly!

( I need to make sure it runs through windows, MAC and linux )

That is, there is a command to force the Download (to IE10 ) of the entire page? Since I’m sure it exists?

Please check out "similar" problems on Stakoverflow in English: https://stackoverflow.com/questions/18083239/what-happened-to-always-refresh-from-server-in-ie11-developer-tools

here’s my code (I hope it’s not too big) and I don’t think it has errors, because it’s just not 100% loaded in IE10, when picking up from the server!!!!!!!!;

when charging site EVERYTHING works perfectly!!!:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- https://blogs.msdn.microsoft.com/luisdem/2013/07/18/modos-de-compatibilidade-do-internet-explorer/  Edge   -->
        <!-- meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
        <!--META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <META HTTP-EQUIV="Expires" CONTENT="-1" -->

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-slider.css">
        <link rel="stylesheet" href="css/jquery.keypad.css">
        <link rel="stylesheet" href="css/em.css">

        <script src="lib/jquery-1.11.2.min.js"></script>
        <script src="lib/jquery.plugin.js"></script>
        <script src="lib/jquery.keypad.js"></script>
        <script src="lib/fabric.js"></script>
        <script src="lib/angular.min.js"></script>
        <script src="lib/bootstrap-slider.js"></script>
        <script src="lib/detect.js"></script>
        <script src="lib/class.SiteMain.js"></script>
        <!-- script src="lib/main.js"></script -->
        <style type="text/css">
            .canvas-container {
                display: inline-block;
                text-align: center;
            }
        </style>
    </head>
    <body id="body">
        <div style="position:absolute; ">
            <div id="logTxt1"></div>
            <div id="logTxt2"></div>
        </div>
        <table>
            <tbody>
            <tr>
                <td valign="middle">
                    <div class="container">
                        <img style="display: none;" src="images/candles.png" id="candle01"/>
                        <div class="changeview left">
                            <a href="javascript:void(0);" id="moveLeft">
                                <img src="images/left.png"/>
                            </a>
                        </div>
                        <div id="main-cavas" class="canvas-container-wp" width="1400" height="1000" style="text-align:center;">
                            <canvas id="c" width="1400" height="1000"></canvas>
                            <img class="hide" src="images/circle.png" id="len-img">
                            <img class="hide" src="images/diverging.png" id="len-img2">
                            <img class="hide" src="images/candles.png" id="candles-img">
                            <img class="hide" src="images/f1.png" id="f1-img">
                            <img class="hide" src="images/f2.png" id="f2-img">
                            <img class="hide" src="images/candles-2.png" id="f15-big-img">
                            <img class="hide" src="images/candles-2.png" id="f15-img">
                            <img class="hide" src="images/candles-2positive.png" id="f15-img-positive">
                            <img class="hide" src="images/candles.png" id="big-img">
                            <div class="changeview right" style=" clear:both; display:none;">
                                <a href="javascript:void(0);" id="moveRight">
                                    <img src="images/right.png"/>
                                </a>
                            </div>
                        </div>
                        <div class="rightControl" id="sidebar">
                            <div class="box box1">
                                <div class="title">
                                    <img src="images/t1.jpg"/>
                                </div>
                                <input id="len-control" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="vertical"/>
                                <input id="len-value" class="inputValue" type="text" min="1" max="100" value="50">
                                <div class="relative">
                                    <div class="lentemp"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="box box2 box2dif">
                                <div class="title">
                                    <img src="images/t2.jpg"/>
                                </div>
                                <div class="labelA">
                                    <span>
                                        <img src="images/a.png"/>
                                    </span>
                                    <input id="valueofA" class="inputValue" type="text" min="15" max="200" value="100">
                                </div>
                                <input id="aValue" type="text" data-slider-min="15" data-slider-max="200" data-slider-step="1" data-slider-value="100" data-slider-orientation="horizontal" value="100"/>
                                <div class="relative">
                                    <div class="atemp"></div>
                                </div>
                                <img src="images/circle-s.png" class="circle-img"  id="slideBar1">
                                <div class="clear"></div>
                            </div>
                            <div class="box box2 box3">
                                <div class="title">
                                    <img src="images/t3.jpg"/>
                                </div>
                                <div class="labelA">
                                    <span>
                                        <img src="images/f.png"/>
                                    </span>
                                    <input id="valueofF" class="inputValue" type="text" min="15" max="100" value="50">
                                </div>
                                <div class="f-box">
                                    <input id="f-control" type="text" data-slider-min="15" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50"/>
                                    <div class="f-control-2">
                                        <input id="f-control-b" type="text" data-slider-min="15" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50"/>
                                    </div>
                                    <div class="relative">
                                        <div class="ftemp"></div>
                                    </div>
                                    <div class="tempspan" id="tempspanDiv"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="nomralBox">
                                <div class="vl1">
                                    <span>
                                        <img src="images/t4.png"/>
                                    </span>
                                    <input id="b-value" class="inputValue" type="text" value="100">
                                    <input id="b-value2" class="inputValue" type="text" value="2" Style="display:none;">
                                </div>
                                <div class="vl1 vl2">
                                    <span>
                                        <img src="images/t5.png"/>
                                    </span>
                                    <input id="m-value" class="inputValue" type="text" value="33.3">
                                    <input id="m-value2" class="inputValue" type="text" value="0.3" Style="display:none;">
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="nomralBox">
                                <div class="buttons2">
                                    <a>
                                        <img src="images/button1.png"  id="button1">
                                    </a>
                                    <a class="btn2">
                                        <img src="images/button2_normal.png"  id="button2">
                                    </a>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div class="nomralBox">
                                <div class="buttons2 btn22">
                                    <a style="cursor: pointer;" id="btnReset">
                                        <img src="images/button3.png" class="normal" alt=""/>
                                        <img src="images/button3-hover.png" class="hover" alt=""/>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <script>
            $(document).ready(function() {
                $('#moveLeft').click(function() {
                    $('body').addClass('moveLeft').removeClass('moveRight');
                    $(this).parent().hide();
                    $('.changeview.right').show();
                });
                $('#moveRight').click(function() {
                    $('body').addClass('moveRight').removeClass('moveLeft');
                    $(this).parent().hide();
                    $('.changeview.left').show();
                });
            });
        </script>
    </body>
</html>
internet-explorer download

  • Apache server + Mysql + php, running on a linux !

1 answer

4


The fault is not well of IE, of course if compared to other browsers IE is more "precarious", but the problem most often are the multiple requests with session that "hold" the server and your IE browser may be outdated.

No use putting something on the site that forces the load of things that failed, this would be a "gambiarra" to try to solve a problem which can trigger a bigger problem later, how to exceed the site traffic limit or the server’s memory consumption increase by much, slowing it down.

This answer is under development, yet has a number of details to add

There are way to make the site more lean, remember not everyone has internet of 10mb or more, there are many people who use mobile internet, which speed is very low, so the site will not load properly in any browser.

I’ll give you a series of tips on how to improve page load time, enjoy cache, etc.

Decrease HTTP requests

The more requests, the longer the server is busy and the more people accessing more requests and "threads" on the server will be needed, which may end up causing "timeout", which is a kind of "crash" security on the back-end side

  1. Decrease the number of images using CSS Sprite:

    Imagine you have 30 icons on the page and images. different png, if you have to load all of them will be 30 different requests, so with this you can use a technique called CSS Sprite.

    This technique consists of joining numerous images into one and using the property background-position:; CSS to get the desired image, so you will load 30 icons in a single request instead of 30, Google uses CSS Sprites see:

    google css sprites

    An example to pick up the logo:

    <style>
.sprites {
    background: url(https://i.stack.imgur.com/JmdWw.png) no-repeat;
}

.logotipo {
    background-position: -23px 0;
    width: 122px;
    height: 38px;
}

.cam {
    background-position: -40px -133px;
    width: 18px;
    height: 18px;
}
</style>

Logotipo:<br>

<div class="logotipo sprites"></div>

Camera:<br>

<div class="cam sprites"></div>

    Stack Overflow itself uses this technique, see this link: http://cdn.sstatic.net/Sites/br/img/sprites.svg?v=ac794c62c332 are basically all website images, used for icons and logos

  2. Merge . js and . css files

    It is common to see numerous calls from css and javascript files like this

    <link href="bootstrap.css">
<link href="theme1.css">
<link href="fields.css">
<link href="animation.css">

<script src="jquery.js"></script>
<script src="plugin1.js"></script>
<script src="plugin2.js"></script>
<script src="plugin3.js"></script>
<script src="plugin4.js"></script>
<script src="plugin5.js"></script>
<script src="plugin6.js"></script>
<script src="plugin7.js"></script>
<script src="app.js"></script>

    This will make 14 requests (not counting images and ajax), but you can decrease the number of requests by merging all files of the same type into one, for example:

    Now it’s just three requests. But note that you do not need to do this manually, because it would be too much work, otherwise it will disturb the maintenance and read the code, you can use a PHP to unite everyone dynamically, I’ll talk about it later.

  3. Reuse the browser cache:

    Cache is a very useful thing that prevents a request that is not POST or PUT stay saved on the client’s computer, so instead of fetching from the server will fetch from a saved copy in the browser, static files such as images and icons may have their cache set, for this if you use Apache just create a file called .htaccess in the main folder of your project (on the server public_html) and place this content:

    # Ativa o cache
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
    <IfModule mod_expires.c>
        ExpiresActive On

        # Cache de um mês para as imagens
        ExpiresDefault "access plus 1 mouth"
    </IfModule>

    # Remove o Etag no final
    FileETag None
</FilesMatch>

    This . htaccess will make files . js, . css, . jpg, . png and etc are cached for one month on the visitors' computer, from the date the visitor requested the page from which they had these images

    In this question I explain in more detail about the cache in static files about how to use the 304 Not Modified:

  4. Compress pages

    Apache has a module called mod_deflate.c, it works well to do the compression based on mimetypes, this Compac

    <IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/html
</Ifmodule>

    You need to have the following module enabled in Apache:

    LoadModule deflate_module modules/mod_deflate.so

Render lock

This one runs a little away from the problem, but it really is something that can improve the "feel" of loading speed, when we call a large script (or more of one) like this:

<!DOCTYPE html>
<html>
<head>
    <title>pagina</title>
    <script src="grande-javascript.js"></script>
</head>
<body>
    ...conteudo...
</body>
</html>

The browser hangs the page at this point:

<head>
    <title>pagina</title>
    <script type="text/javascript" src="grande-javascript.js"></script> <-- Aqui

Until the script finishes loading, so the screen is usually empty and the loading is processing until the javascript is finished, to avoid this you can use the attribute async="" (this is good to use if you have combined multiple Avascripts together) and the attribute defer

  • async loads asynchronously without others having to wait
  • defer makes the script not load until the HTML structure has been fully loaded, so only from this the download starts (I believe this attribute only works on the Internetexplorer)

Example:

<!DOCTYPE html>
<html>
<head>
    <title>pagina</title>
    <script async defer  src="grande-javascript.js"></script>
</head>
<body>
    ...conteudo...
</body>
</html>

Avoid "inline" styles and scripts"

Inline styles is something like:

<div style="border: 1px #000 solid; color: #ccc; background-color: #fff; border-radius: 4px;"></div>

"inline" scripts would be something like:

<script>
    $(document).ready(function() {
        $('#moveLeft').click(function() {
            $('body').addClass('moveLeft').removeClass('moveRight');
            $(this).parent().hide();
            $('.changeview.right').show();
        });
        $('#moveRight').click(function() {
            $('body').addClass('moveRight').removeClass('moveLeft');
            $(this).parent().hide();
            $('.changeview.left').show();
        });
    });
</script>

Move everything you can into your CSS and JS file, because if the page doesn’t cache the scripts and styles are already cached within the files. js and. css, making the page load faster, otherwise if you use "inline" every time you request a page it will have to load "unnecessary" things that could already be saved in the cache.

  • I really appreciate it! studying! Question: There in item 2, how to put everything in one request? I got lost in reading! I think I missed the "example" !

  • @Camilayamamoto I am writing the PHP script to merge the files, as soon as I can finish I warn you.

  • Oh yes! sorry! I was flustered! rsrs! Happy here! も と も と う れ し い

    • I solved the problem! with your "patient" help for the newbie at Stackoverflow! thanks!

  • @Guilerme Nascimento, please ask a question and, I believe, WELL outside the scope, then you don’t have to answer if you don’t want to!. = > All this information that I see you sharing in the answers that you’ve been helping around, did you learn in school? or was it on your own? like "breaking face" until you find the solution ? or still taking extra courses ?

  • 1

    @Camilayamamoto has never taken a course and not even a college, I can tell you one thing, html, css, http and web are my passions. Although I really like desktop (c++) and mobile development. I really have fun and am curious to understand and search :). Camila a detail, I’ll send you the PHP code today if possible and I have 1 or 2 more tips to add that are tools to help you make sure you got all results.

  • CONGRATULATIONS! for your effort BUT mainly for knowing how to pass the ball to those who need it. I believe I am on the same trail of studies.. Sadly I am ashamed of my school. (Because it was not college, I spent dimdim... an excuse to have the diploma) please pass everything you think is relevant!! I want more!

Show 2 more comments

Browser other questions tagged internet-explorer download

You are not signed in. Login or sign up in order to post.