因此,我正在尝试在我的网站中使用此脚本https://codepen.io/cjl750/pen/pEAmgR。
21 f 1
9 c 1
5 a 1
17 d 2
7 b 2
但是由于该网站同时处理jQuery和Mootools,所以我遇到了冲突:
// LAZY LOAD FUNCTION
function lazyLoad() {
$('iframe').each(function() {
var frame = $(this),
vidSource = $(frame).attr('data-src'),
distance = $(frame).offset().top - $(window).scrollTop(),
distTopBot = window.innerHeight - distance,
distBotTop = distance + $(frame).height();
if (distTopBot >= 0 && distBotTop >= 0) { // if frame is partly in view
$(frame).attr('src', vidSource);
$(frame).removeAttr('data-src');
}
});
}
var throttled = _.throttle(lazyLoad, 100);
$(window).scroll(throttled);
// ILLUSTRATION OF VARIABLES
// as calculated on div#example
function lazyLoadExample() {
var frame = $('#example'),
vidSource = $(frame).attr('data-src'),
distance = $(frame).offset().top - $(window).scrollTop(),
distTopBot = Math.round(window.innerHeight - distance), // distance from top of frame to bottom of viewport
distBotTop = Math.round(distance + $(frame).height()); // distance from bottom of frame to top of viewport
document.getElementById('stick1').innerHTML = "distBotTop: " + distBotTop;
document.getElementById('stick2').innerHTML = "distTopBot: " + distTopBot;
}
var throttled = _.throttle(lazyLoadExample, 100);
$(window).scroll(throttled);
根据我的工作,我什至得到Uncaught TypeError: $ is not a function
要“修复”它,我已将每个LazyLoad is not a function
替换为$
赞:
jquery
但是我知道这不是正确的解决方法。请帮忙。
我什至尝试过类似// LAZY LOAD FUNCTION
function lazyLoad() {
jQuery('iframe').each(function() {
var frame = jQuery(this),
vidSource = jQuery(frame).attr('data-src'),
distance = jQuery(frame).offset().top - jQuery(window).scrollTop(),
distTopBot = window.innerHeight - distance,
distBotTop = distance + jQuery(frame).height();
if (distTopBot >= 0 && distBotTop >= 0) { // if frame is partly in view
jQuery(frame).attr('src', vidSource);
jQuery(frame).removeAttr('data-src');
}
});
}
var throttled = _.throttle(lazyLoad, 100);
jQuery(window).scroll(throttled);
// ILLUSTRATION OF VARIABLES
// as calculated on div#example
function lazyLoadExample() {
var frame = jQuery('#example'),
vidSource = jQuery(frame).attr('data-src'),
distance = jQuery(frame).offset().top - jQuery(window).scrollTop(),
distTopBot = Math.round(window.innerHeight - distance), // distance from top of frame to bottom of viewport
distBotTop = Math.round(distance + jQuery(frame).height()); // distance from bottom of frame to top of viewport
document.getElementById('stick1').innerHTML = "distBotTop: " + distBotTop;
document.getElementById('stick2').innerHTML = "distTopBot: " + distTopBot;
}
var throttled = _.throttle(lazyLoadExample, 100);
jQuery(window).scroll(throttled);
之类的事情,
其他javascript:
jQuery(function lazyLoad(&) {});
PS:该脚本应该可以延迟加载iframe。