자바 스크립트 속도 향상

Question

내 웹 사이트 인 www.runthisday.com에는 약 페이지를 사용자 화면의 50 %까지 끌어 당기는 자바 스크립트가 있으며 다른 구성 요소는 약 페이지의 여유 공간을 만들기 위해 왼쪽으로 밀고 있습니다.

문제는 사용자가 처음 버튼을 클릭 할 때 Chrome이 이미지로드를 기다리기 때문에이 JavaScript가 매우 느립니다. 다른 웹 브라우저의 경우 JavaScript는 빠르지 만 이미지를로드하는 데는 두 번째 시간이 걸립니다. 버튼을 처음 사용한 후에는 약 슬라이드가 제대로 작동합니다. 그러나 실제로 중요한 것은 처음입니다.

JavaScript를 빠르게 작동시키고 버튼을 클릭 할 때 이미지가 즉시 나타나도록 수정하는 방법이 있습니까? 사용자가로드 페이지로 이동하면이 문제를 해결할 수 있습니까? 그렇다면 나를 어딘가로 안내해 주시면 JavaScript를 사용하여 사이트를로드하는 방법을 보여줍니다.

정말 도움을 주셔서 감사합니다.

Answer 1

귀하의 이미지는 거대한입니다. 그래서 훨씬 더 관리하기 쉬운 크기로 크기를 조정하여 시작하십시오.

하지만 또 다른 일은 이미지를 미리로드하는 것입니다. 다음은 이미지를로드하고 준비가되었는지 알 수있는 간단한 래퍼입니다.

// Url -> Promise<ImageElement> 
 
var image = function(src) { 
 
    return new Promise(function(pass, fail) { 
 
    var i = new Image() 
 
    i.src = src 
 
    i.onload = event=> pass(i) 
 
    }) 
 
} 
 
    
 
var url = "http://www.runthisday.com/img/the_hammer.jpg" 
 
image(url).then(elem => document.body.appendChild(elem))

당신은 심지어 여러 이미지를 보장하기 위해 Promise.all 래퍼를 사용할 수

특정 섹션에 대한로드 한

Promise.all([ 
    image('one.jpg'), 
    image('two.jpg'), 
    image('three.jpg') 
]).then(images => console.log("all images loaded", images) 

Answer 2

이미지가 항상 같은 경우, 아마 당신은에 저장할 수 있습니다 웹 캐시 ... 영원히 ... 처음으로 기다리려면 ...

다른 옵션은 bi를로드하지 않습니다. g 이미지, 아마 당신은 어떤 반복적 인 제목의 이미지를 사용할 수 있습니다 ... 어떤 곳에서는 정말로 필요할 때 이미지를로드합니다 ...