Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How can I prevent newly loaded elements from being rendered during scrolling?

While scrolling through Facebook profiles on my MacBook Pro M2 with Google Chrome, I keep getting an "Aw, Snap" error after a while. I tried increasing the browser cache size, but that didn't work because the issue seems to lie in the limits of the Blink engine's structure when dealing with lazy loading. To prevent new elements from being rendered, I need to use:

element.style.display = 'none';
However, I need to do this before the element is added, otherwise it will still be rendered. So, I need to find the script that retrieves the element from the server and make the appropriate changes before it's added. Additionally, I attempted to remove elements using:

var profiles = document.querySelectorAll('tagName');
for(var i=0;i<profiles.length;i++) {
profiles[i].remove();
}
However, this only temporarily extended my scrolling ability without preventing crashes. Is there another solution?

Answers(2)
avatar
Vogi
a month ago
Verified Answer
I'm sorry to hear that you're experiencing this issue. The "Aw, Snap!" error message on Google Chrome is a common issue that can be caused by various factors such as memory problems, bugs from Google Chrome, or issues with the server. You can try the following suggestions to resolve the issue: - Run in Incognito Mode - Reload the page - Clear the cache - Malware Check - Update Chrome - Disable Renderer Code Integrity - Create a new user profile. If none of these solutions work, you can try some more advanced troubleshooting methods such as checking your internet connection, opening a private browser, disabling extensions or updating Google Chrome. I hope this helps! Let me know if you have any other questions.

Sources

How To Fix the “Aw, Snap!” Error in Chrome (8 Methods)Fix "Aw, Snap!" page crashes and other page loading errorsHow to fix Aw, Snap! error message in Google Chrome browserHow To Fix Aw Snap! Crash Error In Google Chrome [2023]
avatar
Tolerim
a month ago
It sounds like you are experiencing a performance issue with the web page due to the large number of elements being rendered. One solution to this problem is to make use of a JavaScript library that specializes in lazy loading. By using a lazy loading library, you can specify which elements should be rendered when the user scrolls to a certain point in the page, rather than rendering all the elements at once. There are many JavaScript lazy loading libraries available that you can use, including: - LazyLoad: https://github.com/verlok/lazyload - Blazy: https://github.com/dinbror/blazy - Lozad: https://github.com/ApoorvSaxena/lozad.js - Unveil: https://github.com/luis-almeida/unveil To use one of these libraries, you need to include the library file in your HTML page and initialize it by calling the appropriate function. The library will then take care of lazy loading the elements as the user scrolls through the page. Alternatively, if you want to manually handle lazy loading without using a library, you can do so by attaching an event listener to the scroll event and checking if the element is in the viewport before rendering it. Here's some sample code: 
window.addEventListener('scroll', function() {
  var elements = document.querySelectorAll('.element');
  for (var i = 0; i < elements.length; i++) {
    if (isElementInViewport(elements[i]) && !elements[i].loaded) {
      // Set the element to be loaded
      elements[i].loaded = true;
      // Render the element
      elements[i].style.display = 'block';
    }
  }
});

function isElementInViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
In this code, we attach a scroll event listener to the window object and check if each element with the class "element" is in the viewport before rendering it. We also set a "loaded" flag on each element to ensure that it is only loaded once.
;