在事件上预加载图像

Preload image on event

本文关键字：加载 图像 事件      更新时间：2023-09-26

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

现在发生的事情是，图像与网站一起加载，我想防止这种情况发生。

谢谢。

使用 .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 */)
 })

也许是这样的：

$(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。

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

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

这应该有效

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

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

var src = 'location/file.jpg';

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