简单 JQuery 延迟加载示例

Question

我正在尝试获取延迟加载的基本示例运行，因此图像仅在单击按钮时加载。

html

This text and 
<button class="frequently_asked">this button</button><br><br>
Image to be displayed only when the button is clicked.
<img class="lazyload" src="[image source]"/>

javascript

$('.frequently_asked').click(function() {
$('.lazyload').lazy({
bind: "event",
delay: 0
});
})

感谢任何指导

Answer 1

您可以将 src 设置为数据属性，然后在按下按钮时将其复制到图像源。

$('.frequently_asked').click(function() {
    lazyLoadImages( $('.lazyload') );
});

var setImageSrcFromDataAttribute = function( imageElement ) {
    let imageUrl = imageElement.data( 'src' );
    imageElement.attr('src', imageUrl);
}

var lazyLoadImages = function( imageElements ) {
    imageElements.each( function() {
        setImageSrcFromDataAttribute( $( this ) );
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This text and
<button class="frequently_asked">this button</button><br><br> Images to be displayed only when the button is clicked.
<img class="lazyload" data-src="http://via.placeholder.com/350x150" />
<img class="lazyload" data-src="http://via.placeholder.com/400x200" />
<img class="lazyload" data-src="https://docs.google.com/drawings/d/e/2PACX-1vTb39GuFAvCPzFXXkPfdOMbS50Si5IN2OudxLQNyTxLzuOu5uVeDnEeZXTX9ie04nsXSYBQEjckQPMg/pub?w=986&h=691" style='width:100%;max-width: 700px;' />

简单 JQuery 延迟加载示例

Simple JQuery Lazyload example

jquery

lazy-loading