removing some dom elements after hard reloading the page

Question

I have this code to remove some DOM elements if they're below a #point position.

Sometimes works, sometimes - doesn't.

After hard reloading the page ( Ctrl F5 ) - it never works. Elements are not removed.

After just F5 - mainly works.

Any help?

$(document).ready(function(){
    var aoff = $('#point').position();
    var apoint = aoff.top;
    $('.bpart').each(function(){
        let boff = $(this).position();
        let bpoint = boff.top + $(this).height();
        if(bpoint > apoint){$(this).remove();}
    });
});

Answer 1

The info you gave about F5 vs hard refreshes really helped narrow down the problem!

The problem is that your code is running before the image are loaded. Because of that, the image elements have a height of 0px, which causes your JS to not function properly.

To fix this, instead of waiting for $(document).ready before running your code, wait for $(window).load . This will fire after the images on the page are already loaded.