Learn the position of a div element that appears following the lazy loading of images

Question

Learn the position of a div element that appears following the lazy loading of images

I am struggling to make a div sticky below a set of lazy load images. The issue lies in the fact that the offset of the div keeps changing due to the lazy loading images pushing it down. There are 4 images with unknown heights, making it difficult to accurately determine the offset needed for the sticky behavior. I attempted to use the appear event on the last loaded element but did not achieve the desired results. Any guidance on how to solve this problem would be greatly appreciated. My goal is to obtain the offset of the sticky div in order to implement a check on the scroll event.

<div id="someWrapper">
    <img class="lazy" data-original="someImageURL"></img>
    <img class="lazy" data-original="someImageURL"></img>
   <img class="lazy" data-original="someImageURL"></img>
   <img class="lazy" data-original="someImageURL"></img>
   <div class="sticky">SomeContents</div> <!-- want to make this sticky on scrool -->
</div>

javascript jquery html css

Answer 1

Answer №1

After experimenting and conducting research, I was able to achieve the desired outcome using the following code:

function activateStickyScrollEvent(offSetValue){
//code to trigger scroll event

}

var lazyLength=$('#someWrapper lazy').length;
var lazyCount=0;
$('#someWrapper lazy').one('appear',function(){
      ++lazyCount;
      if(lazyCount===lazyLength){
         var getWrapperOffset=$('#someWrapper').offSet().top;
         activateStickyScrollEvent(getWrapperOffset);

})

Answer 2

After experimenting and conducting research, I was able to achieve the desired outcome using the following code:

function activateStickyScrollEvent(offSetValue){
//code to trigger scroll event

}

var lazyLength=$('#someWrapper lazy').length;
var lazyCount=0;
$('#someWrapper lazy').one('appear',function(){
      ++lazyCount;
      if(lazyCount===lazyLength){
         var getWrapperOffset=$('#someWrapper').offSet().top;
         activateStickyScrollEvent(getWrapperOffset);

})

Answer 3

Answer №2

It's important to verify if the last image in the set has been loaded and then check for the element's offset. Here is a demonstration of how this can be accomplished. Feel free to customize the code to fit your requirements.

//Reference to the wrapper
var $wrapper = $("#someWrapper");
//Reference to the last image in the set
var lastImgSrc = $wrapper.find(" > img:last").attr("data-original");

var image = new Image();
image.onload = function () {
    //Perform actions on load...
    var offset = $wrapper.find(".sticky").offset();
    alert (offset.top);
}
image.onerror = function () {
   //Perform actions on error...
}
image.src = lastImgSrc;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someWrapper">
    <img class="lazy" data-original="someImageURL" />
    <img class="lazy" data-original="someImageURL" />
    <img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-4.jpg" src="http://dreamatico.com/data_images/sea/sea-4.jpg" width="100%" />
    <img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-3.jpg" src="http://dreamatico.com/data_images/sea/sea-3.jpg" width="100%" />
    <div class="sticky">SomeContents</div> <!-- make this sticky on scroll -->
</div>

I trust this information will prove beneficial.

Answer 4

It's important to verify if the last image in the set has been loaded and then check for the element's offset. Here is a demonstration of how this can be accomplished. Feel free to customize the code to fit your requirements.

//Reference to the wrapper
var $wrapper = $("#someWrapper");
//Reference to the last image in the set
var lastImgSrc = $wrapper.find(" > img:last").attr("data-original");

var image = new Image();
image.onload = function () {
    //Perform actions on load...
    var offset = $wrapper.find(".sticky").offset();
    alert (offset.top);
}
image.onerror = function () {
   //Perform actions on error...
}
image.src = lastImgSrc;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someWrapper">
    <img class="lazy" data-original="someImageURL" />
    <img class="lazy" data-original="someImageURL" />
    <img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-4.jpg" src="http://dreamatico.com/data_images/sea/sea-4.jpg" width="100%" />
    <img class="lazy" data-original="http://dreamatico.com/data_images/sea/sea-3.jpg" src="http://dreamatico.com/data_images/sea/sea-3.jpg" width="100%" />
    <div class="sticky">SomeContents</div> <!-- make this sticky on scroll -->
</div>

I trust this information will prove beneficial.

Answer 5

Answer №3

To track the loading of images and determine the offset (OFFSET in this case) :

$(function() {

    function imageLoadingStatus() {
       count--; 
       if( count === 0 ) {
           // At this point, all your "lazy" images have been loaded
           var OFFSET = $('#someWrapper').offset().top;  <---- retrieve the offset value 
       }
    }

    var imageList = $('.lazy'),
        count = imageList.length;  // initializing the counter

    imageList.each(function() {
        if( this.complete ) {
            imageLoadingStatus.call( this );
        } else {
            $(this).one('load', imageLoadingStatus);
        }
    });
});

Answer 6

To track the loading of images and determine the offset (OFFSET in this case) :

$(function() {

    function imageLoadingStatus() {
       count--; 
       if( count === 0 ) {
           // At this point, all your "lazy" images have been loaded
           var OFFSET = $('#someWrapper').offset().top;  <---- retrieve the offset value 
       }
    }

    var imageList = $('.lazy'),
        count = imageList.length;  // initializing the counter

    imageList.each(function() {
        if( this.complete ) {
            imageLoadingStatus.call( this );
        } else {
            $(this).one('load', imageLoadingStatus);
        }
    });
});

Learn the position of a div element that appears following the lazy loading of images

Answer №1

Answer №2

Answer №3

Similar questions

The steps to view the JavaScript file of a website using a web browser's inspector tool

Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Locate a particular text element following a specific anchor tag using jQuery

Fetch external navigation and refresh hyperlinks

Is there a way to eliminate the filter icon from the material-table component?

How to find a collision between a spherical object and a triangular shape in a three

What causes the Invalid Form Body error to appear when using the Discord API?

Less-middleware in Node.js not automatically compiling files

What causes the discrepancy in the output values of the sha1 algorithm when using the packages object-hash and crypto/hashlib

What is the best way to incorporate plugins designed for various jQuery versions onto a single webpage?

A modern CSS solution for a fixed columns and header layout in a scrollable table

When I remove a user as admin, I am unable to retrieve all users to update the data table

What you see is what you get when it comes to effortlessly copying and pasting

Combine two objects and discard any duplicate keys

The function toggleClass() is malfunctioning

The animation for the CSS background image simply refuses to cooperate

Angular 2 ngSubmit triggers unexpectedly on occasions when it is not supposed to

Mixing controllers with the same name in AngularJS from different modules can lead to

The $ symbol is not recognized in this context [jQuery, MasterPage, UserControl, Shared/static Event handler, external javascript]

What are the different approaches for creating a website that adapts to different screen sizes and devices