D
D
DeniSidorenko2017-09-24 12:09:46
JavaScript
DeniSidorenko, 2017-09-24 12:09:46

How to modify the script so that it remembers the values ​​and writes them to localstorage?

Background: started using SVg in a project. There are quite a lot of them on each page, but many of them are repeated several times. I couldn't write svg code in html, it was forbidden. And there were two options, either task for assembly (I use gulp ) or another way out. I stopped to import as a regular image, but in order for the browser to expand the svg code, I found the script. And it looks something like this . And there is a script that helps the browser to expand the svg code (that is, the browser has a full svg code) (it was necessary to work with CSS) The code itself:

<img src='path/to/svg' class='svg>



jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                        $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                        $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

        }, 'xml');

});


Background: started using SVg in a project. There are quite a lot of them on each page, but many of them are repeated several times. I could not write svg code in html, it was forbidden. And there were two options, either task for assembly (I use gulp ) or another way out. I stopped to import as a regular image, but in order for the browser to expand the svg code, I found the script. And it looks something like this

svg var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');

jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');

// Add replaced image'
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}

// Remove any invalid XML tags as per validator.w3.org
$svg = $svg.removeAttr('xmlns:a');

// Replace image with new SVG
$img.replaceWith($svg);

}, 'xml');

});
However, as I mentioned earlier, svg's are many and repetitive. But the script loads each new one without saving it to localstorage. For example, if I asked in 4 places, I can notice in the network tab that it will download it 4 times, and for which 20-30 files are loaded on one page instead of 5-6. Is it possible to modify the script so that there is no such situation and the browser downloads one file - once. Thanks in advance I would really appreciate your help

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question