내가 대체 할 수있는 방법/내 사이트에

Question

는, 각 게시물은 이미지로 시작하지 그 내용, 속성 이름을 대체 :

<img src="sample.jpg" alt="sample alt" /> 

와 내가 무엇을 찾고있어 모든 이미지의 항목을 변경하는 것입니다

<img data-src="sample.jpg" alt="sample alt" /> 

그래서 기본적으로 내가 원하는 중 하나에 : data-와

• 추가]/접두사 src

또는

• 내가 .replace().replaceWith().before().insertBefore()에서 검토 한 결과 그들 중 누구도 내가 원하는 것을하지 않았다 data-src

와/대체를 src 교체합니다.

왜 내가 이것을하고 싶은지에 대한 약간의 정보. unveil.js (lazyload)를 구현하고 싶습니다. 요구 사항 중 하나는 실제 이미지 소스를 "data-src"속성에 포함시키는 것입니다. 나는 markdown과 html을 섞기를 원하지 않는다. 그러므로이 질문을한다. Fiddle

Answer 1

내가 할 수있는 최선은

$('img[src]').attr('data-src', function(){ 
    return $(this).attr('src') 
}).removeAttr('src'); 

데모 생각

$('img').each(function(index){ 
    $(this).data('src', $(this).attr('src')).removeAttr("src"); 
}); 

반대의 경우도

$('img').each(function(index){ 
    $(this).attr('src', $(this).data('src')).removeData("src"); 
}); 

Answer 2

당신은 사용할 수 있습니다 :

$('img').each(function(i, el){ 
    $(el).attr('data-src', $(el).attr('src')).removeAttr('src'); 
}); 

Fiddle Demo

Answer 3

간단한

Answer 4

나는 귀하의 질문에뿐만 아니라 사용 시나리오와 관련하여 응답 할 것이다 작동합니다.

성능을 향상시키기 위해 unveil.js를 사용하고 있지만 사용중인 방법은 그 반대입니다. 이 방법은 실제로 invalid

을 smallest gif 이미지를 src로 사용하고 실제 이미지 src와 함께 data-src를 사용합니다.

당신은 당신이 브라우저도 unveil.js을 initiallizing/사용하기 전에 바로 이미지를 끌어 때문에 unveil.js의 아무 소용이 없다 제시하고있는 방법을합니다.

제안 (두 가지 시나리오) :

1) 서버에 HTML 일 - 단절에 위의 직접 방법을 사용하는 모든 이미지를 변경합니다. 콘텐츠가 브라우저에 다운로드되면 unveil.js를 초기화하고 작업을 수행하십시오.

2) AJAX 요청 받기 (HTML 또는 JSON) - 아약스로 콘텐츠를 가져온 경우 주사하기 전에 여전히 문자열 형식 인 동안 postcontent.replace와 같은 정규식을 적용 할 수 있습니다. (src/gi, "data-src =")를 사용하여 src = to data-src =를 모두 바꿉니다. DOM에 내용을 주입 한 후, unveil.js init 함수를 실행하십시오.