search

louisremi / background-size-polyfill

Adds support for background-size "cover" and "contain" to IE8
http://louisremi.github.com/background-size-polyfill/
MIT License
1.26k stars 359 forks source link

Memory intensive due to no delay when waiting for element #47

Open meventi-stephan opened 10 years ago

meventi-stephan commented 10 years ago

background-size-polyfill is waiting in a loop, until it finds the element. Perhaps it would be better to have a general delay from 10ms or 100ms for the next try, because if you are using background-size-polyfill several times in one page it is very memory intensive.

jefferyto commented 10 years ago

Sorry, but which loop are you referring to? init() is called by the browser when the element is ready (oncontentready) or if the document is ready (ondocumentready), or if the element is already ready when the polyfill code is executed (element.readyState === "complete").

meventi-stephan commented 10 years ago

For example here (file: backgroundsize.htc):

function loop() {
  processSnapshotId = window.setTimeout( function() {
    expando.processing = false;
    processSnapshot( element, expando );
  }, 0 );
}
jefferyto commented 10 years ago

loop() is called after processSnapshot() is finished, in case takeSnapshot() was called (triggered by a property change on the target element) while processSnapshot() was running. (A "snapshot" is a record of all the relevant properties of the target element, takeSnapshot() makes this record, processSnapshot() adjusts the background div in response to the record.) At this point, the target element has been found.

Though, if the target element is modified rapidly, then processSnapshot() may be called continuously; adding a delay in the process may be beneficial (at the expense of fast updates for animation).

Can you post a test case? It would help to confirm the issue.

meventi-stephan commented 10 years ago

Hmm ... this must be the hardest test case. I tried this ... but if i execute this code, Internet Explorer hang up due to memory problem.

<!DOCTYPE html>
<html>
  <head>
   <style type="text/css">
      *  {
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        -ms-behavior: url(backgroundsize.min.htc);
        behavior: url(backgroundsize.min.htc);
      }
      .divClassWithImage {
        background-image: url(test.jpg);
     }
      .divClassWithoutImage {
        background-image: none;
     }
    </style>
  </head>
  <body>
    <div class="divClassWithoutImage"></div>
    <div class="divClassWithImage"></div>
    ...
    <div class="divClassWithoutImage"></div>
  </body>
</html>