jQuery 브라우저 캐시에 이미지를 추가합니다

이 안내서는 jQuery를 사용하여 이미지를 브라우저 캐시에 예압하는 방법을 보여주고로드 시간을 줄임으로써 웹 사이트 성능을 향상시키는 방법을 보여줍니다. 이미지는 DOM 내에서 숨겨진 div 요소에 추가됩니다.

이 코드는 id "img-cache"와 함께 숨겨진

(function($,D,W) {

    var JQUERY4U = {};

    JQUERY4U.UTIL = {

        images:
        {
            loadingImage: '<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317693190.gif"  class="lazy" alt="jquery add image to browser cache " /></img>',
            ajaxImage: '<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317789628.gif"  class="lazy" alt="jquery add image to browser cache " /></img>',
            savingImage: '<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174076317761887.gif"  class="lazy" alt="jquery add image to browser cache " /></img>'
        },

        preloadImages: function()
        {
            $('body').append('<div id="img-cache" style="display:none"></div>');
            $.each(JQUERY4U.UTIL.images, function(i,v)
            {
                $('#img-cache').append(v);
            });
        }

    }

    $(D).ready(function($) {
        JQUERY4U.UTIL.preloadImages(); 
    });

})(jQuery,document,window);

를 생성하고 이미지 요소에 추가됩니다. <🎜 🎜> 루프는 <🎜 🎜> 객체를 통해 반복되어 각 이미지를 캐시에 추가합니다.

<<> 대안 접근법 : <🎜 🎜> div 숨겨진 div없이 이미지를 사전로드하는 더 간단한 방법 : <🎜 🎜> $.each 이 접근법은 images 객체를 직접 생성하여

속성을 ​​할당합니다. 그런 다음 브라우저는 DOM에 추가하지 않고도 이러한 이미지를 가져오고 캐시합니다.

<<> 자주 묻는 질문 이 섹션은 jQuery를 사용하여 웹 페이지에 이미지를 추가하는 것에 대한 일반적인 질문에 대답합니다.

<<> jQuery <🎜 🎜> <🎜 🎜>가있는 div에 이미지를 추가합니다

<🎜 🎜> 메소드를 사용하여 DIV에 이미지를 추가하십시오 :

.

// Array of image URLs
var imageArray = ['image1.jpeg', 'image2.png', 'image3.gif'];

// Preload images
$.each(imageArray, function(index, src) {
  new Image().src = src;
});

JavaScript 로 이미지를로드 및 추가합니다 javaScript의 및 Image 메소드는 동일한 결과를 달성합니다 src jQuery 's

로 이미지를 동적으로 추가합니다 변수를 사용하여 이미지를 동적으로 추가하십시오 :

ajax 및 jQuery를 통한 가변 ID를 가진 이미지가 추가됩니다 ajax는 동적 이미지 로딩 및 추가 기능을 허용합니다 :

Laravel의 Ajax를 통한 이미지가 추가됩니다 Laravel에서는 Ajax Success 콜백 내에서

헬퍼를 사용하십시오 : .

위 내용은 jQuery 브라우저 캐시에 이미지를 추가합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!