Question

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

现在发生的是，图片加载以及网站，我希望防止这种情况发生。

感谢。

Answer 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 */)
 })

Answer 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，您可以尝试将img src更改为html文件中的data-src。

Answer 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');
  });
});

Answer 4

这应该有效

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

这里的loadImage是一个在点击/滚动事件中加载你的图像的功能。＆＃34;一个＆＃34;方法将确保它只发生一次，否则每次有人点击或滚动时最终都会加载图像。

Answer 5

var src =＆＃39; location / file.jpg＆＃39;;

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

在事件上预加载图像

5 个答案: