rimg icon indicating copy to clipboard operation
rimg copied to clipboard

Problems with "is image in viewport" detection

Open klemens-u opened this issue 9 years ago • 0 comments

I had an issue with current Chrome/Webkit browsers. One image, normally visible in the viewport without scrolling was not loaded by rimg. When I scrolled a tiny bit the image loaded immediately.

A bit of investigation showed, that on Chrome reports nonsense values for getBoundingClientRect() . It seems to be a problem with the moment in time of the rimg initialisation. This solved the problem immediately (right at the end of rimg.js):

    // browser
    window.Rimg = Object.create(Rimg());

    // start listening 
    // added document ready check. otherwise chrome/webkit report nonsense values for getBoundingClientRect()
    document.onreadystatechange = function() {
      if (document.readyState == "complete") {
        window.Rimg.initialize();
      }

Furthermore it would be nice if the logic of "in viewport" detection would be (well) documented. (function update(), calculation of "visible") It's difficult to figure out what exactly happens and why.

Maybe we could adapt this best practice: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433

Thanks & have a nice day!

klemens-u avatar May 11 '16 09:05 klemens-u