AJAX अनंतता स्क्रॉल के माध्यम से लोड की गई सामग्री की ऊंचाई लोडिंग के बाद सही ढंग से क्यों नहीं मापा जाता है?

Question

मैं अपनी वेबसाइट के मुख्य div में अनंतता स्क्रॉल (AJAX के माध्यम से कार्यान्वित) के साथ चित्रों या वीडियो से बना पदों को लोड कर रहा हूं। प्रणाली किसी भी लोकप्रिय मेमे वेबसाइट पर बहुत अधिक काम करती है।

समस्या: प्रत्येक पोस्ट में बाईं ओर एक बॉडी सेक्शन और दाईं ओर एक सोशल बटन कंटेनर होता है। मैं सोशल बटन कंटेनर को पोस्ट के शरीर के साथ स्थानांतरित करना चाहता हूं क्योंकि उपयोगकर्ता स्क्रॉल करता है, और पैरेंट div के नीचे रुक जाता है ताकि जब वे पोस्ट के नीचे पहुंच जाए तो वे इसे पसंद कर सकें। समस्या यह है कि मेरे AJAX स्क्रॉल फ़ंक्शन के माध्यम से लोड की गई पोस्टों में से कुछ माता-पिता की ऊंचाई की गणना करने के लिए प्रतीत नहीं होते हैं और वे ब्राउज़र विंडो के शीर्ष तक पहुंचने पर सीधे पैर ले जाते हैं या पैरेंट div के नीचे सीधे कूदते नहीं हैं । वांछित व्यवहार के Here is a visual illustration।

कार्यान्वयन: मैं लोड हो रहा है चित्र और वीडियो पर के साथ संयुक्त का अनुरोध करता है "scroll" कॉल एक काम jsFiddle कि AJAX के व्यवहार अनुकरण करेंगे संकलित करने के लिए सक्षम नहीं था।

प्रत्येक लेख निम्नलिखित संरचना है::

<div class="article-container"> 
    <div class="article-body-left"><img src="..."></div> 
    <div class="social-buttons-right"> 
     <div class="facebook-button">...</div> 
    </div> 
</div> 

प्रत्येक AJAX अनुरोध पूर्ण होने के बाद मैं 'पुस्तक' पर उपयोग करने के लिए सामाजिक बटन कंटेनर पदों में से प्रत्येक निर्धारित करने के लिए कोशिश करते हैं और यहाँ मेरी कार्यान्वयन और डिबगिंग प्रयास है

$(document).ajaxComplete(function() { 
    bind_sticky_boxes(); 
}); 

function bind_sticky_boxes() { 
    $(window).on('scroll', function() { 
    $('.social-buttons-right').not('.following').each(function() { 
     var element = $(this).addClass('following'), 
     originalY = element.offset().top, 
     parent_offset = element.parent().offset().top, 
     parent_height = element.parent().height(), 
     element_height = element.height(), 
     destination = originalY+parent_height-element.height() -10; 

      $(window).on('scroll', function(event) { 
       var scrollTop = $(window).scrollTop(); 
       if (scrollTop > originalY - 10){ 
       element.css('position','absolute'); 
       element.css('top',(scrollTop - parent_offset + 10) + 'px'); 
       element.css('right', '0px'); 
       if (scrollTop > (destination -10)) { 
         element.css('top',parent_height-element_height); 
         element.css('right', '0px'); 
         element.css('bottom', '0px'); 
       } 
       } else { 
       element.css('position','relative'); 
       element.css('top','initial'); 
       element.css('left', 'initial'); 
       element.css('right','initial'); 
       element.css('bottom', 'initial'); 
       } 
      }); 
    }); 
    }); 
} 

डिबगिंग और नोट्स: उन्हें() ajaxComplete का उपयोग कर उपयोगकर्ता स्क्रॉल के रूप में संशोधित स्क्रॉल समारोह पहले AJAX अनुरोध के बाद ठीक काम करता है, लेकिन कुछ हद तक कुछ के रूप में बाद में टूट जाता है का। सामाजिक-बटन-दाएं आलेख निकाय के साथ पालन न करें या सीधे साइट स्क्रॉल के दौरान मूल div के नीचे कूदें।

जब मैंने उन तत्वों का निरीक्षण किया जो गलत व्यवहार कर रहे थे, तो मुझे पता चला कि उनके पास ".following" है, जिसका अर्थ है कि स्क्रॉल फ़ंक्शन ने उन्हें पाया है, लेकिन उन्हें css गुणों का खराब मिश्रण भी मिलता है जो bind_sticky_boxes उन्हें देता है।

यह मुझे विश्वास दिलाता है कि छवि लोड के दौरान ऊंचाई गणना के साथ इसका कुछ संबंध है, इसलिए मैंने थोड़ी देर प्रतीक्षा करने के लिए requestanimationframe() का उपयोग किया और फिर सेटटाइम (फ़ंक्शन() {..}, 2000) ट्रिगर करने के लिए बाद में भी स्क्रॉल करें। इनमें से कोई भी वास्तव में इस मुद्दे को हल नहीं करता है (बाद वाला कोई भी समाधान नहीं था।) मैंने AJAX अनुरोधों को थोड़ा तेज़ी से ट्रिगर करने का भी प्रयास किया है, लेकिन ऐसा लगता है कि किसी कारण से इससे भी बदतर प्रभाव पड़ता है।

अद्यतन: अब मुझे आश्वस्त है कि यह मुद्दा माता-पिता की ऊंचाई गणना से संबंधित है। मैंने विशिष्ट गुणों के साथ अद्वितीय वर्गों के लिए सीएसएस गुणों को बदल दिया और देखा कि गलत व्यवहार तत्वों के लिए वर्ग परिवर्तन लगभग हमेशा माता-पिता div की शुरुआत में होता है, जिसे मैं एक मजबूत संकेत मानता हूं कि इसकी ऊंचाई ठीक से गणना नहीं की जा रही है इसे मुख्य div में जोड़ना।

मेरी अनंतता स्क्रॉल के संबंध में। मैं पूरे AJAX को शामिल नहीं कर रहा हूं क्योंकि मुझे नहीं लगता कि यह इस मुद्दे से सख्ती से संबंधित है। लेकिन मैं इस सामग्री को मुख्य div में जोड़ता हूं:

success: function(response){ 
      if (max_page >= paged){ 
       $('#page').append(response.content); 
      } else{ 
       has_content = false; 
      } 
      loading = false; 
      } 

पृष्ठ लोड होने के बाद मैंने अपनी अनंतता स्क्रॉल शुरू की।AJAX अनुरोध तब ट्रिगर होता है जब उपयोगकर्ता आईडी लोड-अधिक-पोस्ट के साथ तत्व तक पहुंचता है, जो मुख्य रैपर से नीचे है।

$(window).on('load',function(){ 
$(window).on('scroll', function() { 
     var element_position = $('#load-more-posts').offset().top + $('#load-more-posts').outerHeight() - window.innerHeight; 
     var y_scroll_pos = $(window).scrollTop(); 
     if((y_scroll_pos >= element_position) && !loading) { 
      paged++; 
      load_more_posts(); 
     } 
    });  

});

Answer 1

समस्या यह है कि वर्तमान में विभिन्न ऊंचाई/स्थिति गुणों की गणना स्क्रॉल ईवेंट से जुड़ी हुई है, जो AJAX के माध्यम से संलग्न छवियों से पहले आग लग सकती है और इसकी गणना असंगत रूप से की जाएगी। इस समस्या को हल करने के लिए मुझे यह सुनिश्चित करने के लिए लोड इवेंट में बांधना पड़ा कि छवियों का उपयोग करने के लिए तैयार हैं।

$('.article-body-left img').one('load', function() { 
    var element = $(this).parent().parent().find('.social-buttons-right'), 
    originalY = element.offset().top, 
    parent_offset = element.parent().offset().top, 
    parent_height = element.parent().height(), 
    element_height = element.height(), 
    destination = parent_offset+parent_height-element.height() -10; 
    //alert("Element offset: "+originalY+"\nParent offset: "+parent_offset+"\nParent height: "+parent_height+"\nElement height: "+element_height+"\nDestination: "+destination); 
     $(window).on('scroll', function(event) { 
      var scrollTop = $(window).scrollTop(); 
      if (scrollTop > originalY - 10){ 
      element.removeClass('above').removeClass('below').addClass('along'); 
      element.css('top',(parseInt(scrollTop - parent_offset + 10)) + 'px'); 
      if (scrollTop > (destination -10)) { 
        element.removeClass('above').removeClass('along').addClass('below'); 
        element.css('top',''); 
      } 
      } else { 
      element.removeClass('below').removeClass('along').addClass('above'); 
      element.css('top',''); 
      } 
     }); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

सीएसएस:

.along{ 
    position: absolute; 
    right : 0px; 
} 

.below{ 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
} 
.above{ 
    position: relative; 
}