如果display = none，请不要加载图像

Question

我的网站似乎加载非常缓慢，因为所有未显示的图像都在加载。我该如何去做，以便图像在显示之前不会加载？查看网站@khom.us。

HTML：

<!-- Project 1--> 
    <div data-accordion> 
<!-- Number --> 
    <a class="number" id="n1">1</a> 
<!-- Title --> 
    <a class="project slide-link" id="p1" data-slide-id="1" data-control>AA Singles</a> 

    <div data-content> 
     <div class="info"><a><p>Text.</p></a></div> 
    </div> 
    </div> 


<!-- Project 2--> 
    <div data-accordion> 
<!-- Number --> 
    <a class="number" id="n2">2</a> 
<!-- Title --> 
    <a class="project slide-link" id="p2" data-slide-id="2" data-control>MM Singles</a> 

    <div data-content> 
     <div class="info"><a><p>Text.</p></a></div> 
    </div> 
    </div> 

---

<!-- Images for Project 1--> 
<div class="content">     
<span id="id-01"></span>     
    <div class="slideshow"> 

    <img class="image image-wide" data-slide-id="1" src="images/AASingle_01.jpg" alt="image" style="display:none;" onclick="changeImage()"/> 

    <img class="image image-square" src="images/AASingle_02.jpg" alt="image" style="display:none;"/> 

    <img class="image image-square" src="images/AASingle_03.jpg" alt="image" style="display:none;"/> 

    <img class="image image-square" src="images/AASingle_04.jpg" alt="image" style="display:none;"/> 

    </div> 
</div> 



<!-- Images for Project 2--> 
<div class="content">     
<span id="id-02"></span>     
    <div class="slideshow"> 

    <img class="image image-wide" data-slide-id="2" src="images/MMSingle_01.jpg" alt="image" style="display:none;" onclick="changeImage()"/> 

    <img class="image image-square" src="images/MMSingle_02.jpg" alt="image" style="display:none;"/> 

    <img class="image image-square" src="images/MMSingle_03.jpg" alt="image" style="display:none;"/> 

    <img class="image image-square" src="images/MMSingle_04.jpg" alt="image" style="display:none;"/> 

    </div> 
</div> 

的Javascript：

$('.slide-link').click(function() { 
console.log('YES!'); 
var id = $(this).data('slide-id'); 
var $img = $('img[data-slide-id='+id+']'); 
if ($img.hasClass('current-slide')) return; 
var $currentSlide = $('.current-slide'); 
$currentSlide.fadeOut(); 
$currentSlide.removeClass('current-slide'); 
$img.addClass('current-slide'); 
$img.fadeIn(); 
}); 


$('.slideshow img:last-child').addClass('last'); 
$('.slideshow').each(function(){ 
    length_img = $(this).children('img').length; 
    $(this).next('.counter').children('p').html('<span class="number">' + $i + '</span>' + ' of ' + length_img); 

    }); 

$('.slideshow').children('img').click(function(){ 
    $(this).fadeOut();         

    $('.slideshow img').removeClass('current-slide'); 
    length_img = $(this).parent('div').children('img').length; 

    if($(this).hasClass('last')){ 
     $i = 0 
     $(this).parent('div').children('img:first').addClass('current-slide').fadeIn(); 
     $(this).parent('div').next('.counter').children('p').html('<span class="number">' + ($i+1) + '</span>' + ' of ' + length_img); 
    }else{ 
     $i = $(this).parent('div').next('.counter').children('p').children('span').text(); 
     $i = parseInt($i); 
     console.log($i+1) 
     $(this).next('img').fadeIn().addClass('current-slide'); 
     $(this).parent('div').next('.counter').children('p').html('<span class="number">' + ($i+1) + '</span>' + ' of ' + length_img); 
    }   
});  

Answer 1

，直到它知道它的来源是什么图像不会开始加载。您 可以包含<img>元素，因此它会被解析到DOM中，但 不会设置src，直到您决定显示它。

你会注意到这个例子，你将不会得到一个控制台条目，直到你按下按钮，这是因为直到那时图像才加载。

您也可以在打开开发人员工具（F12）的情况下运行此代码段并选择网络选项卡。直到您点击按钮，您才会看到图像源的请求。 当然，负载可以由你需要的任何东西触发，它不一定是按钮点击。

var btn = document.getElementById("btnLoad"); 
 
var img = document.getElementById("lazyLoad"); 
 

 
img.addEventListener("load", function(){ 
 
    console.log("Image loaded!"); 
 
}); 
 

 
btn.addEventListener("click", function(){ 
 
    img.setAttribute("src", "http://www.seanhelvey.com/assets/images/seanhelvey/2014/08/html5-css-javascript-logos.png"); 
 
    img.setAttribute("class", "show"); 
 
    img.setAttribute("alt", "Logo"); 
 
});

.hide {display:none;} 
 
.show {display:inline;}

<img id="lazyLoad" src="" alt="" class="hide"> 
 
<button id="btnLoad">Load Image</button>