我正在尝试使用以下脚本(lazy-load.js)延迟加载图像:
function lazyLoadImage(imgContainers) {
var img = $('<img src="">');
imgContainers.each(function (i, elm) {
img.attr('src', $(elm).data("large"));
img.on('load', function () {
$(this).addClass('loaded');
});
img.addClass('picture');
$(elm).append(img.clone(true));
});
}
$(window).on('load',function () {
var imgContainers = $(document).find(".img-container:not(:has(.loaded))"); // images not loaded yet
lazyLoadImage(imgContainers);
});
问题是,如果我使用标签加载脚本,一切都会顺利,<script></script>
但是当使用 jquery 动态加载脚本时,脚本$.getscript()
无法始终如一地工作(即有时 onload 事件没有触发)。动态加载脚本:
$.getScript( "path/to/lazy-load.js" )
.done(function( script, textStatus ) {
console.log( "script loaded' );
})
.fail(function( jqxhr, settings, exception ) {
console.log( "script not loaded' );
});
那么,为什么脚本不能始终如一地工作?