1

나는 JavaScript에 대해 상당히 익숙하며 휴대 기기 사용자에게 더 작은 이미지를 동적으로 제공하기 위해 내 자신의 스크립트를 만들려고 애썼다. 그때합니다 (DOMContentLoaded 이벤트를 사용하여) 모든 이미지 전에 페이지 크기가로드 확인하는 간단한 스크립트로 올라와있다DOMContentLoaded로 더 작은 이미지를 제공하기 위해 자바 스크립트 사용하기

<img id="test" src="https://www.example.com/pictures/myimage.jpg" /> 

:

다음과 같이 내가 보통의 HTML 이미지를 갖고 있다고 할 수 있습니다. 들어오는 화면 크기에 따라 이미지 src가 해당 화면 크기에 최적화 된 이미지를 제공하도록 변경합니다. 이 스크립트입니다 다음 지경까지 해킹 코드에 대한

document.addEventListener("DOMContentLoaded", function(event){ 

var w = window, 
d = document, 
e = d.documentElement, 
g = d.getElementsByTagName('body')[0], 
x = w.innerWidth || e.clientWidth || g.clientWidth, 
y = w.innerHeight|| e.clientHeight|| g.clientHeight; 

if(x >= 1000) 
{ 
var largeImage = true; 
} 

else if(x <= 999 && x >= 651) 
{ 
var mediumImage = true; 
} 

else if(x <= 650) 
{ 
var smallImage = true; 
} 

if(largeImage){ 
// Do nothing as the image is the right size (large) 
} 

if(mediumImage){ 
var imageSrc = document.getElementById("test").src.toString(); 
document.getElementById("test").src = imageSrc.replace("/myimage.jpg","/medium/myimage.jpg"); 
} 

if(smallImage){ 
var imageSrc = document.getElementById("test").src.toString(); 
document.getElementById("test").src = imageSrc.replace("/myimage.jpg","/small/myimage.jpg"); 
} 
}); 

죄송하지만 실제로 작동합니까 및 모바일 장치에 대한로드 시간에 하찮은없는 2 %를 절약 할 수 있습니다.

그러나 Google 페이지 속도 통계를 사용하여 결과를 분석 할 때 페이지가 원본 이미지를로드하는 것을 볼 수 있습니다 (어쨌든 매우 작은 크기, 일반적으로 수백 바이트) 대체 '이미지도 제공합니다. 그래서 제 질문은 DOMContentLoaded의 나의 이해는 다음과 같다 때문에 원본 이미지가로드되는 방법은 다음 문서 가 완전히로드 및 구문 분석 된 경우

DOMContentLoaded 이벤트가 스타일 시트, 이미지를 기다리지 않고, 해고, 및 서브 프레임로드칩니다

(MDN에서 촬영) 그리고 나는 질문에 정말 관련이없는 건 알지만 사람이 또한 SEO 배경이있는 경우,이 종류가 있는지 알고 도움이 될 것입니다 행동의 댐입니다 서구 관점에서 어떤 식 으로든 노화.

나는 JavaScript를 사용하는 대신 (JQuery를 사용하는 것과 반대), 언어 학습을 시도하고 진정으로 유용한 것을 생각해내는 것이 중요합니다.

고마워요.

답변

1

내가 예상 한 브라우저 프리 페치와 가장 관련이 있습니다. 이미지 태그에 src가 있으면로드 시간에 관계없이 소요됩니다. 반응 형 이미지에서 본 js 솔루션은 빈/더미 src 태그가 있고 적절한 img src가 스왑 된 것으로 바뀌 었습니다.

js 옵션과 마찬가지로이 주석 처리 기술도 매우 마음에 듭니다. 원래 태그에 주석이 달린 경우 아무 것도로드되지 않습니다. (기존 작업을 기준으로) 필요한 항목의 주석 처리를 취소하십시오. (기존 작업을 기반으로) 주석 만 제거하십시오. https://github.com/DSGNRSteve/Uncomment-Technique-for-RWD

+1

답변을 주셔서 감사합니다. 그러나 빈 src 태그를 사용하여 보았습니다. 이로 인해 페이지가 W3C 적합성 테스트에 실패했습니다. 대신 JS를 사용하여 전체 이미지 요소를 생성하는 경로를 따라 가고 있으므로 브라우저에는 아무 것도 없습니다. 미리 가져 오기. JS가 꺼져있을 때 (또는 JS를 실행하지 않는 특정 검색 엔진 스파이더의 경우) 기본 이미지를 제공하기 위해

0

동안. 모바일 이미지의 크기를 압축하고 줄이면 각 이미지에서 약 15 %를 절약 할 수 있으며 이는 Google 페이지 속도 점수에 확실히 반영됩니다.

enter code here 
<?php 

// This function generates images of the correct dimensions for the 
//device viewing them, to save on bandwidth 

// It takes the following parameters: 
// 1. The name of the container in which the image will be placed 
// 2. The src of the larger image 
// 3. The src of the smaller image (note this is also used as the 
//default image if JS is 
// turned off, see the <noscript> tag at the bottom 
// 4. The image class 
// 5. The image alt text 

function generate_image($image_container_name, $big_image, 
$small_image, $image_class, $image_alt){ 
?> 


<script type="text/javascript"> 

document.addEventListener("DOMContentLoaded", function(event){ 

var w = window, 
d = document, 
e = d.documentElement, 
g = d.getElementsByTagName('body')[0], 
x = w.innerWidth || e.clientWidth || g.clientWidth, 
y = w.innerHeight|| e.clientHeight|| g.clientHeight; 

if(x >= 651){ 
var largeImage = true; 
} 

else if(x <= 650){ 
var smallImage = true; 
} 

if(largeImage){ 
var myImage = document.createElement("img"); 

myImage.setAttribute("src", "<?php echo $big_image; ?>"); 
myImage.setAttribute("class", "<?php echo $image_class; ?>"); 
myImage.setAttribute("alt", "<?php echo $image_alt; ?>"); 

var element = document.getElementById("<?php echo 
$image_container_name; ?>"); 
element.appendChild(myImage); 

} 

if(smallImage){ 

var myImage = document.createElement("img"); 

myImage.setAttribute("src", "<?php echo $small_image; ?>"); 
myImage.setAttribute("class", "<?php echo $image_class; ?>"); 
myImage.setAttribute("alt", "<?php echo $image_alt; ?>"); 

var element = document.getElementById("<?php echo 
$image_container_name; ?>"); 
element.appendChild(myImage); 

} 

}); 


</script> 

<div id="<?php echo $image_container_name; ?>"></div> 

<noscript> 

<img src="<?php echo $small_image; ?>" class="<?php echo $image_class; 
?>" alt="<?php echo $image_alt; ?>" /> 

</noscript> 

<?php 

} 

?>