เหตุการณ์ jQuery เพื่อเรียกใช้การกระทำเมื่อมองเห็น div

ฉันใช้ jQuery ในเว็บไซต์ของฉันและฉันต้องการที่จะเรียกการกระทำบางอย่างเมื่อมีการมองเห็น div บางอย่าง

เป็นไปได้หรือไม่ที่จะแนบตัวจัดการเหตุการณ์ "isvisible" กับ divs ที่กำหนดเองและรันโค้ดบางอย่างเมื่อ div นั้นมองเห็นได้?

ฉันต้องการบางอย่างเช่นรหัสเทียมต่อไปนี้:

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

โค้ดการเตือน ("ทำบางสิ่ง") ไม่ควรเริ่มทำงานจนกว่า contentDiv จะทำให้มองเห็นได้จริง

ขอบคุณ

คุณสามารถเพิ่มวิธี. show ()ดั้งเดิมได้ตลอดเวลาเพื่อให้คุณไม่ต้องเรียกใช้เหตุการณ์ทุกครั้งที่คุณแสดงบางอย่างหรือหากคุณต้องการให้ทำงานกับรหัสดั้งเดิม:

นามสกุล Jquery:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

ตัวอย่างการใช้งาน:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});

สิ่งนี้จะช่วยให้คุณทำอะไรบางอย่างได้อย่างมีประสิทธิภาพก่อนแสดงและ afterShow ในขณะที่ยังคงดำเนินการตามปกติของวิธีการ. show () เดิม

^{คุณสามารถสร้างวิธีอื่นได้ดังนั้นคุณไม่จำเป็นต้องแทนที่เมธอด. show () ดั้งเดิม}

ปัญหาจะถูกแก้ไขโดยการสังเกตการณ์การกลายพันธุ์ DOM พวกมันอนุญาตให้คุณผูกผู้สังเกตการณ์ (ฟังก์ชัน) กับเหตุการณ์ของการเปลี่ยนแปลงเนื้อหาข้อความหรือคุณลักษณะขององค์ประกอบ dom

ด้วยการเปิดตัว IE11 เบราว์เซอร์ที่สำคัญทั้งหมดรองรับคุณสมบัตินี้ให้ตรวจสอบhttp://caniuse.com/mutationobserver

โค้ดตัวอย่างมีดังต่อไปนี้:

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});

<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

ไม่มีเหตุการณ์ดั้งเดิมที่คุณสามารถขอได้ แต่คุณสามารถเปิดใช้งานกิจกรรมจากสคริปต์ของคุณหลังจากที่คุณเห็น div โดยใช้ ฟังก์ชั่นไก

เช่น

//declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});

คุณสามารถใช้ปลั๊กอิน Live Queryของ jQuery ได้ และเขียนโค้ดดังนี้

$('#contentDiv:visible').livequery(function() {
    alert("do something");
});

จากนั้นทุกครั้งที่ contentDiv ปรากฏให้เห็น "ทำอะไรบางอย่าง" จะได้รับการแจ้งเตือน!

โซลูชันของ redsquareเป็นคำตอบที่ถูกต้อง

แต่เป็นวิธีการแก้ปัญหาในทฤษฎีคุณสามารถเขียนฟังก์ชั่นที่เลือกองค์ประกอบที่จัดประเภทโดย.visibilityCheck( ไม่ใช่องค์ประกอบที่มองเห็นได้ทั้งหมด ) และตรวจสอบvisibilityค่าคุณสมบัติของพวกเขา; ถ้าtrueทำอะไรแล้ว

หลังจากนั้นฟังก์ชั่นควรจะดำเนินการเป็นระยะโดยใช้setInterval()ฟังก์ชั่น คุณสามารถหยุดจับเวลาโดยใช้การclearInterval()โทรออกได้สำเร็จ

นี่คือตัวอย่าง:

function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

คุณยังสามารถปรับปรุงประสิทธิภาพการทำงานบางอย่างได้อย่างไรก็ตามวิธีการแก้ปัญหานั้นเป็นเรื่องเหลวไหลที่จะใช้ในการดำเนินการ ดังนั้น...

รหัสต่อไปนี้ (ดึงมาจากhttp://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ ) จะช่วยให้คุณใช้งาน$('#someDiv').on('show', someFunc);ได้

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);

หากคุณต้องการทริกเกอร์เหตุการณ์บนองค์ประกอบทั้งหมด (และองค์ประกอบย่อย) ที่ทำให้มองเห็นได้จริงโดย $ .show, toggle, toggleClass, addClass หรือ removeClass:

$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

และตอนนี้องค์ประกอบของคุณ:

$("#myLazyUl").bind("show", function(){
    alert(this);
});

คุณสามารถเพิ่มการแทนที่ลงในฟังก์ชั่น jQuery เพิ่มเติมโดยการเพิ่มลงในอาร์เรย์ที่ด้านบน (เช่น "attr")

ทริกเกอร์เหตุการณ์ซ่อน / แสดงตาม Glenns ideea: toggle ถูกลบออกเนื่องจากไฟไหม้แสดง / ซ่อนและเราไม่ต้องการ 2 ไฟสำหรับเหตุการณ์หนึ่ง

$(function(){
    $.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
        var _oldFn = $.fn[this];
        $.fn[this] = function(){
            var hidden = this.find(":hidden").add(this.filter(":hidden"));
            var visible = this.find(":visible").add(this.filter(":visible"));
            var result = _oldFn.apply(this, arguments);
            hidden.filter(":visible").each(function(){
                $(this).triggerHandler("show");
            });
            visible.filter(":hidden").each(function(){
                $(this).triggerHandler("hide");
            });
            return result;
        }
    });
});

ฉันมีปัญหาเดียวกันนี้และสร้างปลั๊กอิน jQuery เพื่อแก้ปัญหาสำหรับเว็บไซต์ของเรา

https://github.com/shaunbowe/jquery.visibilityChanged

นี่คือวิธีที่คุณจะใช้มันตามตัวอย่างของคุณ:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

ใช้ jQuery Waypoints:

$('#contentDiv').waypoint(function() {
   alert('do something');
});

ตัวอย่างอื่น ๆ บนเว็บไซต์ของ jQuery Waypoints

สิ่งที่ช่วยฉันได้ที่นี่คือResizeObserver spec polyfillล่าสุด:

const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

โปรดทราบว่ามันเป็น crossbrowser และนักแสดง (ไม่มีการสำรวจ)

ฉันใช้ฟังก์ชัน setinterval อย่างง่ายเพื่อให้ได้สิ่งนี้ หากองค์ประกอบที่มี class div1 มองเห็นได้ก็จะทำให้ div2 นั้นมองเห็นได้ ฉันรู้ว่าไม่ใช่วิธีที่ดี แต่เป็นการแก้ไขที่ง่าย

setInterval(function(){
  if($('.div1').is(':visible')){
    $('.div2').show();
  }
  else {
    $('.div2').hide();
  }      
}, 100);

นอกจากนี้คุณยังสามารถลองปลั๊กอิน jQuery ปรากฏตามที่กล่าวไว้ในเธรดแบบขนานhttps://stackoverflow.com/a/3535028/741782

การสนับสนุนนี้ช่วยให้ผ่อนคลายและกระตุ้นให้เกิดเหตุการณ์หลังจากทำแอนิเมชันแล้ว! [ทดสอบกับ jQuery 2.2.4]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

แรงบันดาลใจจากhttp://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

เพียงแค่ผูกทริกเกอร์ด้วยตัวเลือกและใส่รหัสในเหตุการณ์ทริกเกอร์:

jQuery(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

มีปลั๊กอิน jQuery สำหรับดูการเปลี่ยนแปลงในแอตทริบิวต์ DOM

https://github.com/darcyclarke/jQuery-Watch-Plugin

ปลั๊กอินล้อมรอบทั้งหมดที่คุณต้องทำคือผูก MutationObserver

จากนั้นคุณสามารถใช้มันเพื่อดู div โดยใช้:

$("#selector").watch('css', function() {
    console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
    //or any random events
});

หวังว่าสิ่งนี้จะทำงานในลักษณะที่ง่ายที่สุด:

$("#myID").on('show').trigger('displayShow');

$('#myID').off('displayShow').on('displayShow', function(e) {
    console.log('This event will be triggered when myID will be visible');
});

ฉันเปลี่ยนทริกเกอร์เหตุการณ์ซ่อน / แสดงจาก Catalint ตามแนวคิดของ Glenn ปัญหาของฉันคือฉันมีแอปพลิเคชันแบบแยกส่วน ฉันเปลี่ยนระหว่างโมดูลที่แสดงและซ่อนผู้ปกครอง divs จากนั้นเมื่อฉันซ่อนโมดูลและแสดงอีกโมดูลด้วยวิธีของเขาฉันมีความล่าช้าที่มองเห็นได้เมื่อฉันเปลี่ยนระหว่างโมดูล บางครั้งฉันต้องการทำให้เหตุการณ์นี้สว่างขึ้นและในเด็กพิเศษบางคน ดังนั้นฉันตัดสินใจที่จะแจ้งเตือนเฉพาะเด็กที่มีคลาส "displayObserver"

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

จากนั้นเมื่อเด็กต้องการฟังเหตุการณ์ "แสดง" หรือ "ซ่อน" ฉันต้องเพิ่มคลาส "displayObserver" และเมื่อไม่ต้องการฟังต่อฉันจะลบชั้นเรียนออก

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

ฉันต้องการความช่วยเหลือ

วิธีหนึ่งในการทำเช่นนี้
ใช้งานได้เฉพาะกับการเปลี่ยนแปลงการเปิดเผยที่เกิดขึ้นจากการเปลี่ยนคลาส css แต่สามารถขยายเพื่อเฝ้าดูการเปลี่ยนแปลงคุณสมบัติได้เช่นกัน

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

ทางออกของฉัน:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

ตัวอย่างการใช้งาน:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

<div id="welcometo">Özhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

การควบคุมอัตโนมัติของรหัสนี้ไม่จำเป็นต้องใช้การค้นหาที่มองเห็นหรือไม่สามารถควบคุมได้