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>

如果display = none

1 个答案: