joeyvandijk / rimg

[DEPRECATED] A responsive image solution for browsers that support mediaqueries. Pure javascript and no server-side code.
http://joeyvandijk.github.io/rimg
MIT License
294 stars 25 forks source link

Problems with "is image in viewport" detection #18

Open klemens-u opened 8 years ago

klemens-u commented 8 years ago

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!