在事件中预加载图像答案

【问题标题】：Preload image on event在事件中预加载图像
【发布时间】：2016-02-22 23:05:18
【问题描述】：

如何仅在事件开始时预加载图像，即.scroll 或.click？

现在发生的情况是，图片会随着网站一起加载，我想防止这种情况发生。

谢谢。

【问题讨论】：

“我怎样才能仅在事件开始时预加载图像，即 .scroll 或 .click ？” 在事件处理函数中加载图像？
是的。我不希望它在网站加载时加载。
对。只需使用一些 javascript 或 jquery 将其添加到事件处理程序中，而不是使用 HTML 将其放入 DOM 中。已经有数以千计的例子说明如何做到这一点。
我应该声明，我不是很精通 jQuery.. 请将其发布为答案，如果有效，我会将其标记为正确。谢谢。

标签： javascript jquery html css image

【解决方案1】：

使用.one()，.appendTo()

$(element).one("click", function() {
    $("<img src=/path/to/img/>").appendTo(/* target element */)

})

 $(window).one("scroll", function() {
    $("<img src=/path/to/img/>").appendTo(/* target element */)
 })

【讨论】：

【解决方案2】：

可能是这样的：

$(function() {
    $('img').each(function() {
         var self = $(this);
         self.attr('data-src', self.attr('src'));
         self.removeAttr('src');
    });
    var loaded = false;
    function loadImages() {
         if (!loaded) {
             $('img').each(function() {
                 var self = $(this);
                 self.attr('src', self.data('src'));
             });
             loaded = true;
         }
    }
    $('button').click(loadImages);
    $(window).scroll(function() {
        loadImages();
        $(this).unbind('scroll');
    });
});

如果加载图像后执行javascript，您可以尝试将html文件中的img src更改为data-src。

【讨论】：

【解决方案3】：

您可以使用数据属性中的源创建图像标签：

<img data-src="your_image.jpg">

然后在一个事件上加载它：

$('body').on('click', function(){
  $('img[data-src]').each(function(i, img){
    $img = $(img);
    $img.attr('src', $img.data('src'));
    $img.removeAttr('data-src');
  });
});

【讨论】：

【解决方案4】：

这应该可以工作

$(function(){
    $(document).one("scroll, click", function(){
       loadImages();
    })
})

这里的 loadImage 是一个函数，它将在单击/滚动事件时加载您的图像。 "one" 方法将确保它只发生一次，否则每次有人单击或滚动时您最终都会加载图像。

【讨论】：

【解决方案5】：

var src = 'location/file.jpg';

$(document).on('click', function(){
    $('target').append('<img src="' +src+ '" />');
});

【讨论】：